Table-like behaviour with CSS

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!

André

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
http://www.LittleWorksStudio.com