3 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

I want to make a site with the content divided into three columns. I want all columns to have the same height which should be the height of the display or higher if needed. The columns should always be in the middle of the display when resizing.

I guess I could do it using a table, but what's the fun in that? I want to see if this is possible using CSS. This is what I have so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
  <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
      body   {margin: 0px; border: 0px; padding: 0px; background-color: #ffffff}
      #box   {position: relative; width: 600px; background-color: #000000}
      #menu  {position: absolute; width: 300px; background-color: #999999; height: 20px; top: 0px; left: 0px}
      #a     {float: left;        width: 200px; background-color: #ff0000}
      #b     {float: left;        width: 200px; background-color: #00ff00}
      #c     {float: left;        width: 200px; background-color: #0000ff}
      #aa    {height: 100px}
      #bb    {height: 150px}
      #cc    {height:  75px}
    </style>
  </head>
  <body>
    <div style="text-align: center">
      <div id="box">
        <div id="a"><div id="aa"><div id="menu"></div></div></div>
        <div id="b"><div id="bb"></div></div>
        <div id="c"><div id="cc"></div></div>
      </div>
    </div>
  </body>
</html>

I want box, a, b and c to have the same height (at least filling the display, but with the possibility to be higher than that if the content needs it, thus needing the scrollbar).

aa, bb and cc represent the content which in reality has unknown heights.

I figure I have to use 'float' instead of 'relative' since I don't know the height of the content in advance. Is that right or can I do it another way?

If I remove the 'float: left' in the colums they get the width 600px automatically. Why? I have specified the width I want.

Here is an example using a table instead.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
  <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
      body   {margin: 0px; border: 0px; padding: 0px; background-color: #ffffff}
      #grey  {position: absolute; width: 300px; background-color: #999999; height: 20px; top:0px; left: 0px}
      #aa    {height: 100px}
      #bb    {height: 150px}
      #cc    {height:  75px}
    </style>
  </head>
  <body>
    <table align="center" width="600" border="0" cellpadding="0" cellspacing="0" style="height: 100%">
      <tr>
        <td style="width: 200px; background-color: #ff0000"><div id="aa"><div id="grey"></div></div></td>
        <td style="width: 200px; background-color: #00ff00"><div id="bb"></div></td>
        <td style="width: 200px; background-color: #0000ff"><div id="cc"></div></td>
      </tr>
    </table>
  </body>
</html>

I still have the problem that I want the height to be at least the height of the display, and now I also have to figure out how to position the menu in the same way as in the CSS example.

Can anyone please help me?

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 25 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

The three column page

It's not possible to get the three DIVs the same height using CSS unfortunately.

If you want a certain style on each DIV, maybe a background image would get the effect you want? Like one with a blue bit on the left, red in middle, yellow on right.

I suppose there is the min-height property, but since IE ignores this (I think) it's not spread around much.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

insin
insin's picture
Offline
Enthusiast
Belfast, NI
Last seen: 16 years 11 weeks ago
Belfast, NI
Joined: 2003-05-07
Posts: 57
Points: 0

The three column page

See the attached file for a way to make it look as if the left and right columns are the same length and get a footer. This works in Firebird 0.6, but IE6 hides the content of the floated columns for some reason...

However - why do you want the columns to appear to be the same length, like they would be if you used tables for layout? You can achieve a lot of more interesting layouts with CSS Wink

A Pedant Writes...
Into the mountain,
I will fall.

exorcyze
Offline
Regular
Last seen: 15 years 51 weeks ago
Joined: 2003-07-30
Posts: 18
Points: 0

The three column page

Hey all, first post here Smile

I was working on this very thing today, and I'm not sure it's 100% possible for all browsers (IE) for all situations. I had read recently about something like display: table-cell; or something similar but discounted it since it isn't supported by all.

I am trying to recreate my current site design without the single layout table.
Current : http://mx.coldstorageonline.com/
CSS-P : http://mx.coldstorageonline.com/layout/

It's in progress but you can check out the source & the CSS...

This works and looks great in IE, Gecko (Mozilla et al), and Opera. However, the problem comes in on pages with smaller amounts of content. Since the side divs are positioned, the container with the border completely ignores the fact that they exist, and they jut out beyond the bottom of the table.

I will probably have to redesign... Sad