Hello all,
I am trying to make a fluid table-like layout without having to resort
to tables. I have a series of floated DIVs that act as the cells of the
grid, and each has a variable height. The following code will
illustrate the problem I'm having. For some reason that defies both
logic and convention, it works as desired in IE but not in FF. I
haven't been able to test it in any other browsers.
<style type="text/css">
div.floater {
width: 33%;
float: left;
background-color: blue;
border: 1px solid lime;
}
div.rowbreak { clear: both; }
div#div1 { height: 100px; }
div#div2 { height: 200px; }
div#div3 { height: 150px; }
div#div4 { height: 200px; }
div#div5 { height: 100px; }
div#div6 { height: 150px; }
</style>
<div id="div1" class="floater"></div>
<div id="div2" class="floater"></div>
<div id="div3" class="floater"></div>
<div class="rowbreak"></div>
<div id="div4" class="floater"></div>
<div id="div5" class="floater"></div>
<div id="div6" class="floater"></div>
The problem exhibited in Firefox is that the first div of the second row
('div4') becomes 'stuck' under the last div in the first row ('div3') if
div3 is not the tallest cell in the row. I was under the impression
that having the 'rowbreak' div with "clear: both" in there would break
the rows properly.
Is there a way to fix this problem without having a wrapper div with a
static height around each row?
--
Justin.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
