CSS Forum

**mmecca** · 06-06-2007, 06:53 PM

i am having trouble getting these <div>s to line up where i want them to, you can see the one on the bottom on the right side is starting where the bottom ones on the left stop. is there any way to do this without using positioning it or changing the margin? my guess is something to do with float or clear?

Quote:

<html>
<head>
<style type="text/css">
#container
{
width: 800px;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#leftbox
{
float: left;
width: 500px;
margin-top: 5px;
padding: 2px;
}
#leftbox p
{
padding: .5em;
}
#rightbox
{
margin-top: 5px;
margin-left: 550px;
border-left: 1px solid gray;
padding: 2px;
}
#clear
{
clear: both;
height: 20px;
background-color:#fff;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
border-top: 1px solid gray;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftbox">
<div style="width:100px;height:100px;border: 1px solid gray;float:left;margin-left:20px;margin-right:20px;"></div>
<div id="clear"></div>
<div style="width:100px;height:100px;border: 1px solid gray;float:left;margin-left:20px;"></div>
<div style="width:100px;height:100px;border: 1px solid gray;float:left;margin-left:20px;"></div>
</div>
<div id="rightbox">
<div style="width:100px;height:100px;border: 1px solid gray;float:left;margin-left:20px;"></div>
<div id="clear"></div>
<div style="width:100px;height:100px;border: 1px solid gray;margin-left:20px;"></div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>

**LadynRed** · 06-06-2007, 09:21 PM

Assuming you're having the float drop problem in IE, I believe the bug you're running afoul of is the doubled-float margin bug.

When you have a floated element with a margin on it that goes in the same direction, ie. float: left with a left margin or float: right with a right margin, IE will DOUBLE that margin and you'll get float drop.

The solution is to use conditional comments to target a separate 'iefixes' css file that contains ONLY the css needed to correct IE's bad behavior.
You would need to add display: inline on those divs that are float:left with a left margin and the same for the right.

If you have plenty of space INSIDE your 800px container, then this should be all you need to do. IE has a busted box model, so you must be careful of the box size PLUS padding PLUS margins PLUS borders.

**mmecca** · 06-06-2007, 10:10 PM

thanks for pointing out this bug, i'll look into that for when i'm optimizing the site for all browsers. unfortunately i am getting this trouble in firefox as well. i added color to the #clear div for visual testing and i noticed that it (on the right side) is what shows up below the boxes on the left side. however, i am still having trouble fixing the style so that i can get what i want. is there a better way to do it without using that #clear div? as in, how can i have multiple divs on 1 row and then more divs below those without using positioning parameters?

**LadynRed** · 06-07-2007, 01:13 PM

Quote:

how can i have multiple divs on 1 row and then more divs below those without using positioning parameters?

Use floats, and make sure you CLEAR the floats in between the sections. I use a <br> to clear floats like this:
.brclear { /* Use a break with this class to clear float containers on both sides. */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}
HTML is <br class="brclear" />

If all your divs in a row are too wide to fit inside your container, you're going to get some dropping, even in Firefox.

**mmecca** · 06-07-2007, 03:35 PM

thanks for the tip, i'll keep at it and see how it goes.