Send to a Friend
CSS Floats driving me insane?
)
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>
Using Fluther
or
