homepage Welcome to WebmasterWorld Guest from 54.226.191.80
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Equal height columns
without using tables
John_Caius




msg:1187264
 10:51 am on Feb 16, 2003 (gmt 0)

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




msg:1187265
 11:03 am on Feb 16, 2003 (gmt 0)

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




msg:1187266
 11:07 am on Feb 16, 2003 (gmt 0)

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




msg:1187267
 1:48 pm on Feb 16, 2003 (gmt 0)

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




msg:1187268
 1:51 pm on Feb 16, 2003 (gmt 0)

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

Tabular data -> Tables
Layout -> CSS

Nick

John_Caius




msg:1187269
 9:54 pm on Feb 16, 2003 (gmt 0)

Aha... :)

John_Caius




msg:1187270
 11:33 pm on Feb 16, 2003 (gmt 0)

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




msg:1187271
 10:45 am on Feb 17, 2003 (gmt 0)

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




msg:1187272
 11:58 am on Feb 17, 2003 (gmt 0)

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

John_Caius




msg:1187273
 11:23 pm on Feb 20, 2003 (gmt 0)

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




msg:1187274
 12:05 am on Feb 21, 2003 (gmt 0)

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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved