Webmaster Forum / HTML, CSS, Scripts / CSS / June 2003

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>