General Question

webmasterwilliam's avatar

CSS Floats driving me insane?

Asked by webmasterwilliam (165points) August 10th, 2008

OK, I took the forums advice and have been recoding my website. I’ve been making heavy use of CSS and have been developing on the lowest common denominator, which is IE6. I have made some great progress, and am pretty self-impressed with how good the site was looking, until I checked it out on Firefox. Aughhhh! All my floating boxes were askew. I have been trying to figure this out, backing up step by step. I finally created a very simple sample.html, but I still can’t get Firefox to work correctly.

Here’s what I have. I start with a simple container, have two containers floating left, one container in the middle, one container floating right, and a shepard footer to keep things tidy. The problem is that in Firefox 3.0.1 the right container’s top edge aligns with the 1st left container’s bottom edge instead of aligning equally with the top edge. IE6 and IE7 both have the containers aligned the same.

I have uploaded the very simple test to http://thebossreportcard.com/sample.html so everyone can see the code in action, and am including it below.

I am on my knees asking for someone who I will worship forever who can spot the problem with the CSS which is keeping the right container from floating to the top of the main container.

<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<style>
body {margin-top:0px; text-align:center;}
#container {width:500px; margin:auto; text-align:center; border:1px blue solid;}
#leftnav {float:left; clear:left; width:100px; padding:5px 5px; text-align:left; border:1px red solid;}
#rightnav {float:right; clear:right; width:100px; padding:5px 5px; text-align:left; border:1px green solid;}
#content {width:250px; margin-left:125; padding: 5px 5px; text-align:left; border: 1px yellow solid;}
#footer {clear: both; text-align:center; border: 1px aqua solid;}
</style>
</head>
<body>
<div id=“container”>

<div id=“leftnav”>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>

<div id=“leftnav”>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>

<div id=“rightnav”>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.
</p>
</div>

<div id=“content”>
<h2>Heading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>

<div id=“footer”>
Footer
</div>
</div>

</body>
</html>

Observing members: 0 Composing members: 0

12 Answers

mirza's avatar

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

wilhel1812's avatar

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.

webmasterwilliam's avatar

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 ;-(

webmasterwilliam's avatar

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.

mirza's avatar

@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 ?

webmasterwilliam's avatar

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

Tone's avatar

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

Tone's avatar

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

webmasterwilliam's avatar

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?

wilhel1812's avatar

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?

Tone's avatar

@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.

ben's avatar

@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.

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther