Forum Moderators: not2easy
I'd like the top of each row of boxes to line up.
The code below does this in IE on the Mac. With IE on a PC a box that can't fit on the end of a line only floats left as far as the longest list in the line above lets it. I want nice neat rows whatever the browser width . . .
What am I missing here, folks? Any help much appreciated.
<html>
<head>
<style type="text/css">
#features .box
{
border: 1px solid #D2D2D2;
float: left;
margin: 5px 5px 5px 5px;
vertical-align: top;
width: 175px;
}
#features .container
{
padding: 12px 0 0 0;
}
#features .grouplist /** change to tablecellD **/
{
background-color: #EAF5EA;
font-size: 100%;
margin: 0;
padding: 1px 5px 1px 5px;
}
#features .grouptitle
{
color: #333333;
font-weight: bold;
padding: 5px;
}
</style>
</head>
<body>
<table width="80%" align="center" border="3"><tr><td>
<div id="features" style="width: 100%;">
<div class="container">
<div class="box">
<div class="grouptitle">title1</div>
<div class="grouplist">item1</div>
<div class="grouplist">item2</div>
<div class="grouplist">item3</div>
<div class="grouplist">item4</div>
</div>
<div class="box">
<div class="grouptitle">title2</div>
<div class="grouplist">item1</div>
<div class="grouplist">item2</div>
<div class="grouplist">item3</div>
</div>
<div class="box">
<div class="grouptitle">title3</div>
<div class="grouplist">item1</div>
<div class="grouplist">item2</div>
<div class="grouplist">item3</div>
<div class="grouplist">item4</div>
<div class="grouplist">item5</div>
</div>
<div class="box">
<div class="grouptitle">title4</div>
<div class="grouplist">item1</div>
<div class="grouplist">item2</div>
<div class="grouplist">item3</div>
</div>
<div class="box">
<div class="grouptitle">title5</div>
<div class="grouplist">item1</div>
<div class="grouplist">item2</div>
<div class="grouplist">item3</div>
</div>
<div class="box">
<div class="grouptitle">title6</div>
<div class="grouplist">item1</div>
<div class="grouplist">item2</div>
<div class="grouplist">item3</div>
</div>
<div class="box">
<div class="grouptitle">title7</div>
<div class="grouplist">item1</div>
<div class="grouplist">item2</div>
<div class="grouplist">item3</div>
</div>
</div>
</td></tr></table>
</body>
</html>
If the IE Win version you're using is lower than IE6, OR if it's IE6 but you don't have a valid DOCTYPE in your page, the problem is almost certainly the box model. You'll need to hack it to work properly on these IE versions (Note: if it's IE6, solve the problem by using a valid DOCTYPE, which kicks IE6 out of Quirks mode and uses the correct box model.), which primarly consists of giving just IE5.5 and lower a width value equal to width+padding+margin+border, but leaving all other browsers with widths equal to only the width of the content area for all boxes.
Fixing the box model (if that's what's wrong) will make all those link boxes fit onto one line and eliminate the float problem you are experiencing.
As for that float problem...those floats are actually behaving exactly as they are supposed to behave. If you go to positioniseverything.net and look at their articles on float behavior, you'll see a great visual demonstration of what floats do when they wrap, and the problems you can run into if the heights are different.
You'll need to either make sure they all fit on one line (see above) or manually set them to display in even rows by specifying how many lists you will allow on any given "line" or "row."
To do the latter, use more than one containing <div> and place inside it only the number of floats you will allow on that line in order to prevent wrapping. So if you want three per line...
<div id="container1">
<div id="float1"></div>
<div id="float2"></div>
<div id="float3"></div>
</div>
<div id="container2">
<div id="float4"></div>
<div id="float5"></div>
<div id="float6"></div>
</div>
This should keep them looking the way you want, as each container <div> will expand to the height of the longest list inside it. (Note: Make sure you give the container <div>s a float: left;, as well. This will make them stretch to contain the floated boxes inside them. And remember that anything with a float must also have a width.)
Hope this helps.
#features .box
{
...
margin: 5px 5px 5px 5px;
...
}
Win/IE6 can't handle the horizontal margins of floats. It doubles the left margin.
According to DrDoc using display:inline; on the floats makes IE behave the right way.
