Equal height columns

without using tables

[John_Caius]

I'm trying to create what looks like a one-row, two-column table without using tables. At the moment the height of each column is dependent on how much text is in it. I want the heights of the two to be the same and dependent on how much text is in the larger one (as you would get with a traditional table). I've currently set the height of the columns but that's not working as I want it to because it doesn't work out if the text gets more than this set height.

Stylesheet:

div.profile {
float: left;
width: 20%;
height: 60px;
background-color: #AAAAFF;
padding: 5px;
margin-bottom: 5px;
}

div.message {
float: left;
width: 80%;
height: 60px;
background-color: #BBBBFF;
padding: 5px;
margin-bottom: 5px;
}

HTML:

<DIV CLASS="profile">
test 1<BR>
test 2<BR>
test 3<BR>
</DIV>
<DIV CLASS="message">
testing testing testing
</DIV>

Any ideas on how I could achieve what I want? Thanks.

[SuzyUK]

hi John

Yes you would need to specify a height on the parent element (possibly the body tag?)

so body {height: 100%;}

then if you specify identical heights on your two "column" divs in percentage terms say 50% they then know that they are expected to be 50% of the body

Suzy

[Longhaired Genius]

There's no reason not to use a table for this. As, I assume, the message is associated with the profile, what you're describing is a table. Use a table.

[John_Caius]

Thanks for your replies. In the context of what I'm trying to do, it's probably best to use a table. Why is it particularly that the general consensus on CSS is to avoid using tables?

[Nick_W]

It's cos poeple get carried away... ;)

Tabular data -> Tables
Layout -> CSS

Nick

[John_Caius]

Aha... :)

[John_Caius]

Ok, another silly question. I've built a CSS table to do the job but I can't get rid of an unwanted gap between the cells. I've tried lots of commands in the table.discussion part of the stylesheet but I just can't get rid of them. Am I just being daft? Code follows:

stylesheet:

table.discussion {
width: 100%;
padding: 5px;
}

TR.header {
width: 100%;
background-color: #8888FF;
}

TR.message {
width: 100%;
}

TD.title {
font-size: 1.3em;
font-weight: bold;
}

TD.time {
text-align: right;
}

TD.profile {
color: red;
text-align: center;
background-color: #AABBCC;
}

TD.message {
color: green;
}

HTML:

<TABLE CLASS="discussion">
<TR CLASS="header">
<TD CLASS="title">Message title</TD>
<TD CLASS="time">0845</TD>
</TR>
<TR CLASS="message">
<TD CLASS="profile">John Caius</TD>
<TD CLASS="message">Here is my message</TD>
</TR>
</TABLE>

[SuzyUK]

Hi John you might want to have a look at this page - CSS for tables [w3.org]

and I'm pretty sure it's the border-collapse property that would solve your gaps..

or just add cellspacing="0" to your table HTML code

Suzy

[John_Caius]

That's a really useful link - thanks! :)

[John_Caius]

Finally got a chance to get back to coding. It worked :) - thanks for that. I added

border-collapse: collapse;

into the stylesheet for the table element.

[John_Caius]

Ok, next question...

I can't get my cells to span more than one column. I'm applying {column-span: 2} to a <TD> element but it doesn't work. Maybe I can't apply that command to that element, or I'm just being really daft. Any ideas?

Code:

<TABLE>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR>
<TD STYLE="column-span: 2; background-color: yellow">Message title</TD>
<TD>3</TD>
</TR>
<TR>
<TD>John Caius</TD>
<TD>Here is my message</TD>
<TD>3</TD>
</TR>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>