Member Avatar for cmgdev

Greetings! I am trying to create a simple landing page using some css. I have referenced every book I have and cannot find out what I am doing wrong (probably a few things).

Would you please take a quick peek at the landing page at in IE and Firefox.

In Firefox, the #content is below a centered nav bar. The nav bar is supposed to be floated to the left with the content to the right (all in the center container). It looks fine in IE but is completely a mess in Firefox. I would appreciate any help you may be able to offer.

If I had any hair left I would pull it out :confused: .

Thank you for your help.

  • 4 Contributors
  • 6 Replies
  • 118 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

A compact set of checks and fixes that build on points from , , and without repeating earlier snippets.

Start with simple diagnostics. Verify a standards DOCTYPE (for example <!DOCTYPE html>) so engines use the same box model. Use the browser inspector to view computed widths and outlines; temporarily apply outline:1px solid magenta; to suspected elements to see how they flow. Reduce the page to a minimal test case (container + nav + content) so stray markup or an unclosed tag is not affecting layout. Validate HTML/CSS with the W3C tools to catch malformed markup.

Two practical fixes that avoid the float-wrapping headache:

  • Contain floats without changing markup using a clearfix pseudo-element (keeps current float-based rules working and prevents siblings from being pushed down).
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
  • Switch to a modern layout using Flexbox (centers a fixed-width sidebar and a flexible content column inside a centered wrapper). Flex avoids float-wrapping issues and is straightforward to reason about:
.container {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
nav.sidebar { flex: 0 0 220px; }
main.content { flex: 1 1 auto; }

Also prevent oversized images from forcing wraps by making them scale to their container:

nav img { max-width: 100%; height: auto; display: block; }

Further reading: a concise clearfix reference at CSS-Tricks and a practical Flexbox guide on MDN. For subtle width math problems, applying box-sizing: border-box site-wide often simplifies calculations (*,*::before,*::after { box-sizing: border-box; }).

Recommended Answers

All 6 Replies

Member Avatar for MidiMagic

This is a place where the browsers are not the same. The divs are inheriting the center attribute from the outside div in FF, but not IE.

The second div is also too large, since it is wrapping. FF decided to give it maximum width by placing it below the other div. This is part of the fluid nature of div.

Also, you are mixing css with the deprecated align attributes. This can cause unpredictable results.

Since you are already in a table, use the table to place the two parts where you want them. Tables always stick together in the correct order if all of the tags are present.

Member Avatar for cmgdev

Thank you for the tips. I was able (at least from my perspective browsers) to get everything lined up by adjusting the margins and position attributes.

However, there are more to build so I am going to use your advice for those. I appreciate the help.

Member Avatar for Eilandor

Cpecification of CSS says that when you use "float" you must specify width of floating block.
You don't need "position:relative" here.
Your main ("center") block should not be floating.
Here is code which work in my FF and IE:

#center {
}

#nav {
float: left;
padding: 15px 15px 15px 10px;
width: 25%;
}

#content {
float: right;
padding: 15px 10px 15px 10px;
margin: auto 25px 0px 0px;
width: 55%;
}

Specification of "width: 75%" for "content" should not work because actual width of "nav" IS NOT 25%. Inside nav there are images with width="197" that is much more than 25% (I think about 45%. That's why 55% for content works correctly). You may tune numbers by yourself.

Member Avatar for Eilandor

P.S.
Almost forget to say that "clear: both;" forces content to begin from a new line and who knows why it is ignored in IE. (you should not use it in content)

Member Avatar for throbbie

Hi

I have been getting into CSS recently to re-work a lot of different wordpress themes so I am by no means an expert - in fact I'd say just beginning to become slightly competent, however, I think I can give you some tips on software to help.

Type stylizer into google and get the free download trial version. Open it and select "Stlye a website" then put your url in. This lets you highlight each part of the css and make changes - I suggest that you don't save it, just use the info to amend the live stylesheet. It has firefox and IE options.

You can also get a css toolbar in firefox which offers very similar functionality.

Use the tools and muddle through - it has worked for me.

Good luck

Rob

Member Avatar for MidiMagic

To avoid trouble with incompatibilities between FF and IE, don't put width or height in the same style as margin, border, or padding.

IE renders them in the opposite nesting order to that used by the standard (and other browsers).

Instead, nest two tags, one with the width or height, and the other with the3 margin, border, and/or padding.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.