Table-like behaviour with CSS

**Jonathan N. Little** · Jun 27 '08, 07:15 PM

Re: Table-like behaviour with CSS

André Wagner wrote:

Hello!
>
(please read this message using fixed-font)
>
I'm writting a website with boxes of content. The number of cells in
each row might change depending on the browser window size, and the
content will be something like this:
>
AAAAA BBBBB CCCCF
AAAAA BBBBB
BBBBB
BBBBB
>
DDDDD EEEEE FFFFF
EEEEE FFFFF
EEEEE FFFFF
EEEEE
>
I'm trying to use this box model in CSS:
>
.caixa {
width: 190px;
height: 150px;
margin: 0 10px 10px 0;
float: left;
display: block;
>
}
>
It works, but the problem is that I don't want a fixed height, I want
the height to auto adjust (pretty much like a table in HTML).
>
If I remove the height attribute, I get something like this:
>
AAAAA BBBBB CCCCC
AAAAA BBBBB
BBBBB FFFFF
DDDDD BBBBB FFFFF
FFFFF
EEEEE
EEEEE
EEEEE
EEEEE
>
Please help me! What can I do to get the first behaviour?
>
Thank you in advance!

You cannot. You cannot specify a "virtual grid". You either have to set
a fixed height to accommodate your max content and have the floats line
up their tops as they create their virtual rows to the available window
width. Or you will have to set a fix number of "cells" per row and use
clear, no advantage over table.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

Little Works Studio Site Maintainance

http://www.LittleWorksStudio.com

Table-like behaviour with CSS

Table-like behaviour with CSS

Comment