By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,474 Members | 1,273 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,474 IT Pros & Developers. It's quick & easy.

Table-like behaviour with CSS

P: n/a
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é
Jun 27 '08 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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
Jun 27 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.