Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
CSS 3-Column, Non-Fixed-Height Layout
Old 12-27-2007, 12:19 AM CSS 3-Column, Non-Fixed-Height Layout
JeremyMiller's Avatar
WT Moderator

Posts: 1,712
Name: Jeremy Miller
Location: Las Vegas, NV
Trades: 0
Picking up from another thread, it would be interesting if someone could render the following using CSS only:

HTML Code:
<table>
  <tr>
    <td>Left Column</td>
    <td>Center Column</td>
    <td>Right Column</td>
  </tr>
</table>
All columns must have the same height and different colors. The columns cannot be fixed height and must use only CSS. The closest I have ever seen is something like this:

HTML Code:
<div id="left_column">Left Column
<div id="center_column">Center Column
<div id="right_column">Right Column</div>
</div>
</div>
That particular layout will make the columns the same height as the right column unless one of the other columns is larger in content. In that case the right column will be too short.
__________________
Jeremy Miller

Please login or register to view this content. Registration is FREE
JeremyMiller is offline
Reply With Quote
View Public Profile Visit JeremyMiller's homepage!
 
 
Register now for full access!
Old 12-28-2007, 01:40 PM Re: CSS 3-Column, Non-Fixed-Height Layout
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
I find the easiest way to do this is a bit of a 'fake' - using the Faux Columns method
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 12-28-2007, 01:45 PM Re: CSS 3-Column, Non-Fixed-Height Layout
JeremyMiller's Avatar
WT Moderator

Posts: 1,712
Name: Jeremy Miller
Location: Las Vegas, NV
Trades: 0
Quote:
Originally Posted by LadynRed View Post
... using the Faux Columns method
Care to elaborate? I haven't heard of that method (may have seen the method, but not heard of the name).

Thanks!
__________________
Jeremy Miller

Please login or register to view this content. Registration is FREE
JeremyMiller is offline
Reply With Quote
View Public Profile Visit JeremyMiller's homepage!
 
Old 12-29-2007, 11:28 AM Re: CSS 3-Column, Non-Fixed-Height Layout
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
I'll let A List Apart Elaborate - http://www.alistapart.com/articles/fauxcolumns/
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 01-09-2008, 10:04 AM Re: CSS 3-Column, Non-Fixed-Height Layout
Junior Talker

Posts: 1
Trades: 0
maybe you must try height:100% for div.i find good example in this
http://xmlci.blogspot.com/2008/01/bo...g0px-text.html
surbas is offline
Reply With Quote
View Public Profile
 
Old 01-09-2008, 12:53 PM Re: CSS 3-Column, Non-Fixed-Height Layout
JeremyMiller's Avatar
WT Moderator

Posts: 1,712
Name: Jeremy Miller
Location: Las Vegas, NV
Trades: 0
Quote:
Originally Posted by surbas View Post
maybe you must try height:100% for div.i find good example in this
http://xmlci.blogspot.com/2008/01/bo...g0px-text.html

Thanks. I'll check that out in more detail a bit later as I'm swamped with a deadline right now. I'm a little concerned about the layout b/c it includes a fixed height, but since it's in a non-English language I don't know what their motivation was.
__________________
Jeremy Miller

Please login or register to view this content. Registration is FREE
JeremyMiller is offline
Reply With Quote
View Public Profile Visit JeremyMiller's homepage!
 
Reply     « Reply to CSS 3-Column, Non-Fixed-Height Layout
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.23299 seconds with 12 queries