Is it even possible? Simple 3 column 100% height fixed width

[dlite922]

I'm not sure why this is so complicated...

I simply want 3 equal width columns with equal height that grows to contain the longest column, all wrapped in a 1000px width container.

HTML:

<div id="wrap">
  <div id="col1">

  </div>
  <div id="col2">

  </div>
  <div id="col3">

  </div>
  <div id="clear"></div>
</div>

Here's a screen shot of what I'm looking for:


See how the first two column heights match the 3rd (longest) column?

Why do I want this? These columns will have a border and it looks tacky if one's short, etc.

CSS:

#wrap {
    width: 1000px;
    background-color: #333;
}

#col1 {
	float: left;
	width: 300px;
	border: 1px solid white;
	background-color: red;
}

#col2 {
	width: 300px;
	padding-left: 310px;
	padding-right: 310px;
	border: 1px solid white;
	background-color: blue;
}

#col3 {
	float: right;
	width: 300px;
	border: 1px solid white;
	background-color: green;
}

.clear {
	clear: both;
}

IE6+ compatible.

Any examples? where am I going wrong? Firefox render's this all over the place but don't know what's wrong.

Thanks for any help,


Dan

[JKing]

A couple things here.

1) You have created a clear class in your css but you reference a clear id on your div.

<div class="clear"></div>

2) Col2 is extremely large once padding is taken into consideration. Your total width for that element including the border would be 922px leaving very little room for your other columns. For now I would remove the padding and leave that until the end. With all the columns in a 1000px width you have 94px left to pad them with.

3)Col2 needs float:left;

That should get all your columns lined up in the proper order.

[JKing]

To solve the problem of equal height there is a few methods to choose from however because you are using borders it can be more difficult.

I suggest going the javascript route to solve this problem. It works in all browsers and few users have it disabled. If they do have it disabled the site wont be broken just not as pretty.

There are CSS tricks too and you may prefer those,
Here is a good link: Equal Column Heights

[tharden3]

An easy fix using CSS would be to apply the "min-height" attribute in each of your columns:

min-height: 30em;

Use this in each of your CSS column descriptions, or create a class and apply it to all three columns. Just make the size slightly larger than your largest column and they will all be the same size. This will not "grow" dynamically as you add content though. If your largest column grows taller than the min-height you specified, just go back and change the class.

[drhowarddrfine]

3 columns is easier than you'd think. The best way is to position each column 'absolute' and set the top/bottom to the top/bottom of its containing parent. I'd give more detail but I'm really, really busy.

[kovik]

JKing, that link's pure CSS solution is very interesting. I have to wonder who thought of that and then implemented it. o.o

[dlite922]

Thanks for all the replies. I ended up going with fixed height. I'll have to manually change it if content grows (BLEGH! UGLY!).

The javascript worked fine as well. simple one-line jquery, but I forget the reasons why I abandoned this.

We need HTML 5 and all these issues fixed.

All old browsers (such as <IE 7 and below) should automatically EXPLODE when HTML 5 comes out.

Thanks,


Dan

[kovik]

If we could get enough websites to completely remove support for older browsers and place large notifications on their websites for users of outdated browsers to update, we could do that.

In fact, only Facebook would need to have the notification. Problem solved.

[Ramil Alcibar]

Have you tried this one: http://www.cssplay.co.uk/layouts/threecol.html with an example here: http://www.cssplay.co.uk/layouts/3cols.html

There's also a lot of layout examples at: http://www.cssplay.co.uk/layouts/

Or simply this one: http://www.onderhond.com/blog/onderh...s-with-borders could get you an idea on how to do it.