CSS Floats driving me insane?

So you missing a “px” after 125. Anyways i didn’t bother trying to figure out whats wrong with your code (just because i get paid to do such things)/ But anyways so i just built a quick three collumn framework on dreamweaver that you could use for what you are trying to do – here.

FYI the term webmaster is depreciated in today’s web world

Well, you have two containers with the id leftnav. don’t think that’s the problem tho. Try moving rightnav up above the leftnav in the markup.

Mirza,

Thanks so much for giving me your time. I corrected the 125px problem, and it didn’t do anything. I took your sample, and added a second Sidebar1 Content container so that it mimics the problem I am trying to solve. The additional container floated to the right of the first one, so I added a clear:left to the .thrColFixHdr #sidebar1 and a clear:right to the .thrColFixHdr #sidebar2. The same problem exists, where the Sidebar2 Content is pushed down to the level of the bottom of Sidebar1 Content. The behavior is only a problem in Firefox. IE6 is working as it should.

I uploaded your version with my updates to http://thebossreportcard.com/sample2.html.

I’m beginning to think CSS hates me ;-(

Wilhel1812,

I really thought you had something for a second. I moved the <div id=“rightnav”> container above the two <div id=“leftnav”> containers and everything flowed. However, when I added a second <div id=“rightnav”> container, it pushed both <div id=“leftnav”> containers down! Again, the sample works fine in IE but is problematic in Firefox.

I have posted this as http://thebossreportcard.com/sample3.html.

As a note, the reason I am doing this is because the new website design will have a varying number and heights of containers. For example, a user may enter some invalid data, and I will place a top left container with the error messages in it. This will cause the other left column containers to be pushed down, without affecting the variable number of containers on the right hand edge.

@webmaster: on the demo i sent you. why not create two separate divs inside sidebar1 for the two different content you want to post on sidebar1 ?

Great Idea! I’ll make separate left and right column containers and then put the various children divs inside. I appreciate the insight.

ids are unique selectors. You can’t have more than one id=“rightnav” or id=“leftnav”. If you need to reuse css selectors, use classes. IE isn’t behaving as it should, it’s quite the opposite.

The solution is not as complicated as you have it here. With an explicitly defined container width, you can just float everything left and clear the footer.

Like this

(just watch your widths. remember, total width = defined element width + padding + borders.)

Tone,

Thanks so much for taking time to respond. Very interesting about;

1) That I shouldn’t reuse CSS id selectors. Is that because of a bug in IE or is that due to W3C standards? I wonder why no other authors have ever mentioned that in anything I’ve read before. Seems like a big flag should be on that since CSS is all about reusability.

2) I thought padding was to push the contents inside the container inward without expanding the container. For example, if I had 100px wide container and a left and right padding of 10px, that my text length would be a max of 80px before line break. Did I get this wrong?

You shoudn’t because of w3c standards. try checking your site in the w3c (x)html validator at http://validator.w3.org/ (they alo have a css validator btw)

that’s right, but if the inner content cant be shrinked, the container will have to grow bigger. was that understandable?

@webmasterwilliam – My pleasure.

1. Yeah, the unique nature of ID selectors is a basic rule in the CSS spec. See here. Not only shouldn’t you do this, but it will probably cause all kinds of weird, unpredictable behavior. IE, because it doesn’t follow the rules, makes a lot of assumptions, and in a sense “rewrites” your code. This is bad. Follow the spec and you’ll be very glad you did down the line as browsers evolve, new ways of viewing content appear, and IE very, very, slowly falls into compliance.

CSS is definitely about reusability in some sense, but the reusability comes mostly from taking advantage of the Cascade in Cascading Style Sheets. You define a set of default properties (these days often with a “reset” stylesheet that normalizes browser defaults. Yahoo’s reset.css is a popular example.), and then you override properties further down the cascade as necessary, getting more and more specific with your selectors as necessary. For example, you might define the font-family, link colors, default text size, margins, etc., at a very high level in the cascade (like on the body), then never have to set those properties again, or only a few times.

IDs should be used to give nearly every major element in your (x)html uniqueness, which is very valuable not only for CSS but for advanced JavaScript (Ajax and the like) and other things. You use classes to apply common properties to many elements, IDs often don’t have any CSS selectors associated with them, but it’s still good practice to give your major elements IDs.

2. In the W3C box-model, the width property in the CSS describes the width of the content, excluding the padding and margins. This is a bit counter-intuitive, but that’s the way it is. So to get the actual number of pixels your element will take up on the screen, you add the width, the left and right padding, and the width of any borders. So in your example, you have your nav elements set to 100px. With 5px of padding on each side and a 1px border, the entire box ends up being 112px wide. All browsers use this model, except IE 5.5 or IE 6+ running in “quirks mode.” It’s not at all advisable to use this mode, IE provides it for backwards-compatibility only.

@webmasterwilliam

The advice you’ve gotten here is all good, though I’m not sure it’s what will fix your particular issue.

I took a look at your sample page using firebug (your best friend), and I think I’ve solved your problem. The “clear:left” rule on the second div in the left sidebar is effectively creating that gap. Just float one containing left sidebar div, and then make your left content divs into normal divs (with no clear rules) inside containing left div. That should fix it.