2 Column Layout - Equal Height

**Ian R. Gordon** · Jun 14, 2004 14:19

Hey,

Maybe someone can help me, I am too tired at this moment to try and logically figure this out, I am trying to create a 2 colum layout that have headers and are both the same height regardless of the content streching one of them further than the other. I can't make them a fixed height as then, I run into overflow problems. Another thing is that they have a div the first one that acts as like a header div, here is an illustration of what I mean.

In the attached image, I explain two things, the two columns are flush with the sides of the container div, they are 1px dotted on all sides, they have a spacing between them of lets say 15px-20px. The first div has a title div called "section Title" that text should be aligned left and should hover in the middle of the div, so "line-height" might be useful here.

Again, thank for all who an help.

EDIT: Removed Image

**Paul O'B** · Jun 14, 2004 14:37

Hi,

While we're waiting for the attachment to be approved you might want to look at my 2 column examples as they show the main ways to make equal column heights.

One is using a bg gif for one column and the other uses my negative margin technique which also produces equal columns.

http://www.pmob.co.uk/temp/2column_simple_1.htm

Paul

**Ian R. Gordon** · Jun 14, 2004 15:42

I deleted the attachment and just tagged a remote image. Thanks again for the assistance Paul, just look above and see what I am trying to accomplish.

**Ian R. Gordon** · Jun 14, 2004 22:30

I think I solved one of my problems with the two columns but, now I need to equalize them...however is someone has an alternative method for doing the columns, I am all ears...

**sushi** · Jun 15, 2004 01:03

I know this will make a lot of people mad, but it works...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<title>EUROlive - Shared live show</title>
<script type="text/javascript"> </script> 
<style>
HTML {
	height: 100%;
}
body {
	height: 100%;
	padding: 0;
	margin: 0;
	color: #000000;
	background-color: #CCCCCC;
}
#clear_top {
	height: 150px;
}
#outer {
	width: 240px;
	background: #FFFFFF;
	margin-left: 500px;
	color: #000000;
}
#header {
	margin-left: 10px;
	width: 728px;
	height: 140px;
	top: 0px;
	left: 0px;
	overflow: hidden;
	position: absolute;
	background-color: #FFFFFF;
	font: 11px Tahoma;
	color: #FF0000;
	border: 1px solid #000000;
}
#left {
	position: relative;
	height: 100%;
	float: left;
	margin-left: -490px;
	width: 480px;
	background-color: #FFFFFF;
	font: 11px Tahoma;
	color: #000000;
	border: 1px dotted #000000;
}
#left h1 {
	height: 25px;
	width: 480px;
	background-color: #e2e2e2;
	font: 14px Tahoma;
	font-weight: bold;
	border-bottom: 1px solid #000000;
}
#right {
	position: relative;
	widht: 240px;
	height: 100%;
	font: 11px Tahoma;
	color: #000000;
	border: 1px dotted #000000;
}
</style> 
</HEAD>
<body onResize="history.go()">

<script language="JavaScript">
<!--
var winW = 10, winH = 10;

if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
  winW = window.innerWidth;
  winH = window.innerHeight;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth;
  winH = document.body.offsetHeight;
 }
}

document.write("<style>HTML #outer{height:"+(winH-154)+"px; min-height:"+(winH-154)+"px;}</style>")
//-->
</script>

<div id="clear_top"></div>
<div id="outer">
	<div id="left">
		<h1>&nbsp;Section Title</h1>
		<p>&nbsp;left column</p>
	</div>
	<div id="right">&nbsp;right column</div>
</div>
<div id=header>&nbsp;header</div>
</body>
</HTML>

I'm waiting for your comments...

**sushi** · Jun 15, 2004 01:45

and here's one without the js... you might have to tweak it a little...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<title>EUROlive - Shared live show</title>
<script type="text/javascript"> </script> 
<style>

HTML {
	height: 100%;
}
body {
	height: 100%;
	padding: 0;
	margin: 0;
	color: #000000;
	background-color: #e2e2e2;
}
input {
	border: 1px solid #000000;
	background-color: #FFFFFF;
	font: 11px Tahoma;
	color: #000000;
}
#outer {
	min-height: 100%;
	background: #FFFFFF;
	margin-bottom: -20px;
	margin-left: 201px;
	color: #000000;
	height: 100%;
	width: 526px;
}
#header {
	width: 727px;
	height: 145px;
	top: 0px;
	left: 0px;
	overflow: hidden;
	color: #000000;
	position: absolute;
	background-color: #CCCCCC;
}
#menu {
	height: 100%;
	float: left;
	margin-left: -201px;
	margin-bottom: -145px;
	width: 201px;
	position: relative;
	background-color: #F28739;
}
#footer {
	bottom: 0;
	width: 727px;
	clear: both;
	color: #000000;
	position: relative;
	height: 20px;
	text-align: center;
	background-color: #F8AC75;
}
HTML #footer {
	height: 20px;
}
#clear_top {
	height: 145px;
}
#clear_bottom {
	clear: both;
	height: 20px;
}
HTML #center {
	padding-left: 5px;
	margin-bottom: 12px;
	height: 1%;
}
#center {
	font: 11px Tahoma;
	color: #000000;
}

</style> 
</HEAD>
<body>
<div id="outer">
	<div id="clear_top"></div>
	<div id="menu">left</div>
	<div id="center">right</div>
	<div id="clear_bottom"></div>
</div>
<div id="footer">footer</div>
<div id="header">header</div>
</body>
</HTML>

**Paul O'B** · Jun 15, 2004 02:41

Hi Sushi,

Good effort but they both versions fail badly in firefox and none of the columns equalise anyway (The js version is completely out in firefox and is almost unusable in ie). You've made some simple errors which can easily be corrected though

.

You can't specify 100% and min-height:100% in the same style declaration for a column otherwise it will just be 100% and moz won't expand the column which is why you need to use either the star selector or child selector to hide styles from the appropriate browser.

You can't use 100% height on onner nested elements because it won't inherit correctly. You can only really use it on #outer so evrything must be based on that.

You won't be able to get 2 column colours on 100% height because one column is the background which is ok when you use full screen or when you don't want 100% (I do have a version that gets around this but is a little more complicated.)

The easiest way fro a column colur is a bg gif.

Anyway heres the tweaks to make your code work in ie and firefox.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html4...1224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<title>EUROlive - Shared live show</title>
<script type="text/javascript"> </script>
<style>
HTML {
 height: 100%;
}
body {
 height: 100%;
 padding: 0;
 margin: 0;
 color: #000000;
 background-color: #e2e2e2;
}
input {
 border: 1px solid #000000;
 background-color: #FFFFFF;
 font: 11px Tahoma;
 color: #000000;
}
#outer {
 min-height: 100%;
 background: #FFFFFF;
 margin-bottom: -20px;
 margin-left: 201px;
 color: #000000;
 width: 526px;
 background-color: #F28739;
}
* html #outer {height:100%}
#header {
 width: 727px;
 height: 145px;
 top: 0px;
 left: 0px;
 overflow: hidden;
 color: #000000;
 position: absolute;
 background-color: #CCCCCC;
}
#menu {
 float: left;
 margin-left: -201px;
 width: 201px;
 position: relative;
}
#footer {
 width: 727px;
 clear: both;
 color: #000000;
 position: relative;
 height: 20px;
 text-align: center;
 background-color: #F8AC75;
}
#clear_top {
 height: 145px;
}
#clear_bottom {
 clear: both;
 height: 20px;
}
* HTML #center {
 padding-left: 5px;
 margin-bottom: 12px;
 height: 1%;
}
#center {
 font: 11px Tahoma;
 color: #000000;
}
</style>
</HEAD>
<body>
<div id="outer"> 
  <div id="clear_top"></div>
  <div id="menu">left</div>
  <div id="center">
  right</div>
  <div id="clear_bottom"></div>
</div>
<div id="footer">footer</div>
<div id="header">header</div>
</body>
</HTML>

Paul

**Paul O'B** · Jun 15, 2004 02:42

Hi Ian,

Before I post a solution did you want the columns 100% height (and longer if content is longer) or do you just want the easier solution of just content height.

Also do you want different column colours?

Paul

Edit:

Your design is very close to one of my existing layouts here :
http://www.pmob.co.uk/temp/2col_main.htm

**Paul O'B** · Jun 15, 2004 04:12

Hi Ian,

Just did this roughly but you should get the picture

Either column can be the loingest and the other column will equalise automatically.

IE doesn't like 1px dotted borders and will forget to redraw them properly when the page is scrolled. You have to either use 2px borders (or live with it).

You could use 2px dotted border then rub them out with a 1 pixel white border but is very complicated and not worth the effeort (and probably not possible in this layout).

To achieve equalising columns they have to be attached in some way which is why the gap between them needs to be made with an image (with borders on it).

I've only drawn them roughly so you could do a better job.

http://www.pmob.co.uk/temp/iang2col.htm

Hope that helps anyway..

Paul

**Ian R. Gordon** · Jun 15, 2004 06:35

Thanks to everyone. I don't mind that the dotted border is a bit messed up as the content expands, that is just too bad for IE users, they should be using a standards complaint browser anyway (that's so terrible of me).

Paul, I changed my mind, what I need now, is a right colum that has two dotted columns in it one on top of the other, they don't have to be equal height, just be semantically correct.

**Ian R. Gordon** · Jun 15, 2004 06:44

I updated the image to reflect the new changes:

EDIT: Removed Image

**Paul O'B** · Jun 15, 2004 07:07

Hi Ian,

That;ll be a lot easier then

http://www.pmob.co.uk/temp/iang2col2.htm

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>2 column layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
 margin: 10px;
 padding: 0;
 text-align:center;/* center layout in ie5 and 5.5. */
 background:#fff;
 color:#000;
}
#container {
 position:relative;
 width: 710px;
 margin-left: auto;
 margin-right: auto;
 text-align:left;
}
#left {
 position:relative;
 float:left;
 width:500px;
 border:1px dotted #000;
 margin-bottom:15px;
}
#right {
 position:relative;
 float:right;
 width:200px;
}
.rightinner {
 border:1px dotted #000;
 margin-bottom:15px;
}
#header {
 background:#666666;
 text-align:center;
 min-height:150px;
 margin-bottom:15px;
}
* html #header {height:150px}
#header h1 {
 margin:5px;
 color: #000000;
}
#left h2 {
 background:#CCC;
 margin:0;
 border-bottom:1px solid #000;
 color: #000000;
}
#footer {
 clear:both;
 text-align:center;
 color: #FFFFFF;
 background-color: #666633;
}
p {margin-top:0;margin-bottom:10px;}
</style>
</head>
<body>
<div id="container"> 
  <div id="header"> 
	<h1>This is the header content</h1>
  </div>
  <div id="content"> 
	<div id="left"> 
	  <h2>Section title</h2>
	  <p>This is the left content text : This is the left content text : This 
		is the left content text : This is the left content text : This is the 
		left content text : This is the left content text : </p>
	  <p>This is the left content text : This is the left content text : This 
		is the left content text : This is the left content text : This is the 
		left content text : This is the left content text : </p>
	  <p>This is the left content text : This is the left content text : This 
		is the left content text : This is the left content text : This is the 
		left content text : This is the left content text : </p>
	  <p>This is the left content text : This is the left content text : This 
		is the left content text : This is the left content text : This is the 
		left content text : This is the left content text : </p>
	</div>
	<div id="right"> 
	  <div class="rightinner"> 
		<p>This is the right content : this is the right content :</p>
	  </div>
	  <div class="rightinner"> 
		<p>This is the right content : this is the right content :</p>
	  </div>
	</div>
  </div>
  <div id="footer">Footer</div>
</div>
</body>
</html>

Paul

**Ian R. Gordon** · Jun 15, 2004 07:58

Once again Paul, its been a pleasure.

**Aphenitry** · Jun 18, 2004 07:47

There are just hacks for doing this using CSS 2.1.

Basically you have to nest div's and generally point one column out as the one that will be the one resizing (depending on how you do it).

So, you would do something like

<div id="background">
<div id="content">welcome to my site/div>
<div id="nav">home, products....</div>
</div>

You could apply a min-height to this, though ie and safari doesn't get it. You can apply a ie-hack using a selector ie doesn't get, but safari gets it so it still won't look correct there (but who cares?!? :)).

If you decide to use "float" on both content and nav, remember to add a "clear: both" element before you end the background-div so that it expands correctly.

The background-div really has nothing to do here, but the problem is that content and nav won't have the same height, so you slap a background-image in the background-div to fake it (users won't notice the difference).

You said using absolute position you'd get overflow troubles - you can make it scroll so that the design won't get in the way. Personally I usually loathe this solution so I never use this. Which is sad, because its so easy to implement well in most browsers.

To make this work without any hacks at all, you would need a property like this in the css file:

div#content,
div#nav {
height: shared;
}

or

div#dontent {
height: from( content );
}

or something similar... I guess it will be some 4-10 years before this gets to 90%+ or the users tho, heh.

You could do this using javascript, but that's also very high on my top10 no-no list.

**Paul O'B** · Jun 18, 2004 08:55

Aphenitry, did you read any of my posts above

I've already detailed the background image trick plus other more sophisticated techniques in my links above that work in 95% of browers.

Thanks for the info anyway I know you were trying to be helpful

Paul

**Ian R. Gordon** · Jun 18, 2004 19:13

Paul, lol...THank for the help gentlemen, I do appreciate it...oh and Paul, how does that negative height work for the column?

**Paul O'B** · Jun 19, 2004 00:57

Originally Posted by ian

how does that negative height work for the column

Which example are you referring to Ian ?

**jayboots** · Jul 3, 2004 20:07

I need to ask because though I really love CSS and use it all the time, I find that sometimes, when using divs alone, things are just too convoluted. Why not just use tables? You can do this with tables lickity split and it works just about everywhere. I've managed to get columns that expand to the available remaining height in a page using tables, but have never seen the same done with divs (actually, I just clicked one of the example above and they seem to have sorted that--but perhaps using javascript? I can do it with tables without JS and without any image tricks--just simple tables and CSS). I understand the purist ideals but isn't columnar, as shown here, really just a fancy table?

I'm asking because I really want to know why I shouldn't be sticking to my good 'ol, faithful tables.

**Egor** · Jul 3, 2004 20:24

Originally Posted by jayboots

I'm asking because I really want to know why I shouldn't be sticking to my good 'ol, faithful tables.

Isn't it because a table will only display when it's fully loaded? While a div loads as it's parsed?

I think it would be fine to stick with tables in this case, as it's about the only benefit of using them.

**Paul O'B** · Jul 4, 2004 00:56

but perhaps using javascript

No javascript needed - see my 3 col demos.

Get away from tables - and why is everybody so hung up on equalising columns anyway. Thats just a side efffect of tables that people have become used to

Those type of layouts may be easier with tables so I won't say that beginners (or those that in fact want these type of table layouts) shouldn't use hybrid tables for this as of course it will do the job quite well.

I'm asking because I really want to know why I shouldn't be sticking to my good 'ol, faithful tables.

Because the w3c recommends that tables shouldn't be used for layout although of course thay are not banned but should be used with care and make sense when linearised. But why limit yourself and your design.

Anyway this is the same discussion running in the other thread so you may want to look and post there instead

Paul

**jayboots** · Jul 4, 2004 13:58

Thanks for the answers. I deliver a lot of intranet services and more often than not, we want them to look and act like a desktop app--hence the styling choice. I appreciate the comments, but I am somewhat intrigued by the notion that the W3C reccommends that tables shouldn't be used for layout--its one thing to specify how something should behave, it is quite another to suggest how something should be used. I think I'll continue to use tables for now, but I am happy to find these CSS/DIV techniques.

Many thanks!

**Paul O'B** · Jul 7, 2004 02:23

Originally Posted by jayboots

but I am somewhat intrigued by the notion that the W3C reccommends that tables shouldn't be used for layout

Have a look here:

http://www.w3.org/TR/REC-html40/struct/tables.html

Originally Posted by w3c

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media.
........................ authors should use style sheets to control layout rather than tables.

Paul

**jayboots** · Jul 7, 2004 10:20

Thanks again Paul! That may help somone who is reading this.

I actually meant intrigued somewhat rhetorically, as in "isn't it fascinating that they should try to control such a thing when it really isn't part of their mandate to do so". IMHO. I guess I don't live and die by everything that the w3c says, particularly since I think that fixed format rendering is too reminiscent of paper for my tastes.

Also, concerning the comment about tables being presented only when fully parsed--of all things, that is something that IE seems to have got around (and I think circa 4.0), interesting, yes?

Anyways, I don't intend to make this into a debate on tables vs. divs and the validity of the w3c's claims on those matters. As you already mentioned, there is already a thread for that.

Cheers!

User Tag List

Thread: 2 Column Layout - Equal Height

Thread Tools

Display

2 Column Layout - Equal Height

Here is how I want it to look

Bookmarks

Bookmarks

Posting Permissions