Columns with same height

[zing]

Hello,
I want to define n columns that appear with specific background colors,
different to the body background (i.e. so you can see the area they occupy).

I want the columns to be of the same height but I don't want to use absolute
positioning. I want the height to be determined by the height of the longest
column.

I've defined the columns using inline <span> elements surrounding the column
content. All works fine except the height.

Any ideas ?

div.columns span
{
display: inline;
padding: 5px;
margin: 10px;
border: thin solid red;
width: 30%;
height: 100%; /* seems to have no effect */
background : lightblue;
vertical-align : top;
}

html:

<div class=columns>
<span>
column 1 stuff
</span>
<span>
column 2 stuff>
</span>
<span>
column 3 stuff>
</span>
</div>

[RF Emmerink]

zing wrote:

Hello,
I want to define n columns that appear with specific background colors,
different to the body background (i.e. so you can see the area they occupy).

I want the columns to be of the same height but I don't want to use absolute
positioning. I want the height to be determined by the height of the longest
column.

I've defined the columns using inline <span> elements surrounding the column
content. All works fine except the height.

Any ideas ?

div.columns span
{
display: inline;
padding: 5px;
margin: 10px;
border: thin solid red;
width: 30%;
height: 100%; /* seems to have no effect */
background : lightblue;
vertical-align : top;
}

html:

<div class=columns>
<span>
column 1 stuff
</span>
<span>
column 2 stuff>
</span>
<span>
column 3 stuff>
</span>
</div>

Hi,

I have had the same problem and solved it using javascript. The javascript
assigns the largest height to the other layers. I used it on:

http://www27.brinkster.com/top100ned...p?documentid=3

I hope someone else has got a css solution since the resizing after page load is
not always nice, especially not at my page with all the banners to load.

Kind regards,

Roderik

[Johannes Koch]

zing wrote:

Hello,
I want to define n columns that appear with specific background colors,
different to the body background (i.e. so you can see the area they occupy).

I want the columns to be of the same height but I don't want to use absolute
positioning. I want the height to be determined by the height of the longest
column.

That's how HTML tables are rendered by a user agent. If you don't want
to use HTML tables (because it's not real tabular data but just for
layout purposes), there are CSS tables (display: table-cell). Have a
look at the CSS 2.0 spec or at
<http://user.cs.tu-berlin.de/~kochj/multi-col/> ('table-cell' row). But
notice the browser list at the end of the detail pages.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)