Wednesday, October 12, 2005, 6:16:09 PM, Scott Haneda wrote:
> I really don't want to jam this one in a table, but I need 5 divs across,
> butted right up against each other, after the 5th one, I need a new row.
> The width of each of the 5 items is fixed, the height is not.
There's a relatively simple solution that will work in most browsers, big
exception being IE/mac:
.wrapper {display:table-row;}
.foo {display:table-cell;}
then for IE/win:
* html .wrapper {
display:block;
clear:left;
}
* html .foo {
float:left;
width:40px;
display:inline; /* float bug squashing */
}
You can rely on IE/win's hasLayout to make sure each .foo is rectangular.
Note that, in CSS2 browsers, to use this type of float layout you'd also
need to provide incrementally large (0, 40px, 80px, et.al.) left margins on
each .foo to keep them from wrapping around each other. Lucky for us, CSS2
browsers can just use the table display properties.
Now, if IE/mac is a must, you'll have to use the float method described
below, and each successive .foo will need a left margin 40px more than the
last.
Steve
--
http://mrclay.org/ : http://thefrenchhorns.com/
______________________________________________________________________
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/
