...

View Full Version : 2 cols - I want equal height?



Oskar
02-13-2005, 07:49 PM
I can't find a proper way to give my 2 columns equal height. As you can see, leftcol has more content than rightcol, and is therefore logically higher.

How can I make each of them related to each other, so I can make sure, that both of them has the same height at all times?

http://zyph.dk/eksempler/equalheights/ (A pure example of the problem)

chilipie
02-13-2005, 07:51 PM
ALA to the rescue :cool: !

http://www.alistapart.com/articles/fauxcolumns/

Oskar
02-13-2005, 08:05 PM
Thanks, but I would really appreciate if one could find a method, where I could avoid using images ;)

but thanks.

rmedek
02-13-2005, 08:05 PM
Repeat after me:

"I will use the forum search from now on. I will use the forum search from now on."

Repeat 100 times. :D This question has been asked a lot. So much, in fact, I made an example for this question:

http://richardmedek.com/temp/example6.htm

Hope this helps,

Oskar
02-13-2005, 08:40 PM
Hm, I did search but didn't find anything at first glance.. Thanks alot for your example :thumbsup: but after playing some time with it I don't quite like it.. heh. I want two seperate cols and I don't think your example is.. hm, right? And I can't see how I can use your method..

www.zyph.dk/eksempler/equalheights/index2.html - your example (modified by me)

What do the backslash here do?

font: 10px/14px verdana, sans-serif;

rmedek
02-13-2005, 11:14 PM
My example was only meant to show that you could apply the color of the lesser column as the background image of the wrapper, rather than the color of the column.

If you don't like the footer, the width, height, colors, etc, you can change those. I just styled the rest up for effect.

This:


font: 10px/14px verdana;

means a 10px verdana font with a line-height of 14px.

Anyhow, you're right... you can't use my example completely, because you are floating both columns, which takes them "out of flow," which means you can't relate their height to the height of their container, because there is no container. If you put a white border on the #maincontainer div you'll see what I mean.

My example only works if you something contained within the wrapper to begin with. If you don't, you're kind of stuck using the ALA method.

Oskar
02-14-2005, 11:16 AM
Okay, I see. By the way it wasn't ment to offend you or your example.

I have played a little more and I got to this (www.zyph.dk/eksempler/equalheights). What I did was to apply display: table; to the mainContainer and 100%; height to both of my cols. Now it works in FF, but IE won't?

I have this feeling that it is very simple? :)

blueice02
02-15-2005, 04:01 AM
This is a frequent problem and while there may be a CSS trick to make it work, I haven't found it yet. The solution I use and have come up with uses Javascript to first identify which column is longer and then setting the other column to match its height. Since this is a CSS forum I won't delve into that, but if you are interested in a javascript solution let me know.

Oskar
02-15-2005, 11:18 AM
I do not like the idea of using JavaScript to make the most basic functions in a layout, but it seems that it's necessary?

I got this script from a friend, but I don't know how to use it - maybe it's something similar to the one you have?


<script type="text/javascript">
var elms = ['left','middle','right'];

function synchronizeDivs(){
var maxH = 0;//minimum height
for(i=0;elms.length>i;i++){
maxH = Math.max(maxH,document.getElementById(elms[i]).offsetHeight);
}
for(i=0;elms.length>i;i++){
document.getElementById(elms[i]).style.height=maxH + 'px';
}
}
</script>

rmedek
02-16-2005, 09:16 AM
There's no need, in this case, to use Javascript. You just have to be a little creative when using CSS to emulate a table-based layout. Maybe this will work for you:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">

* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

body {
color: #666;
font: 10px/14px verdana, sans-serif;
background: #eee;
}

#wrapper {
height: auto;
width: 650px;
margin: 0 auto;
border: solid 30px #ccc;
background: #fff;
}

#wrapper:after {
content: ".";
display: block;
height: 0;
clear: both;
}

h1 {
padding: 30px;
}

h2 {
font-size: 12px;
padding: 10px;
}

p {
padding: 10px;
text-indent: 10px;
}

#content {
float: right;
width: 445px;
border-left: solid 10px #ccc;
}

#subcontent {
width: auto;
height: 100%;
}

</style>
</head>
<body>
<h1>Even Columns, again</h1>
<div id="wrapper">
<div id="content">
<h2>Content</h2>
<p>CSS makes things certain things very hard to do. Like, making columns appear to be the same height when there are different amounts of content inside.</p>
<p>The thing is, it's easy to make it harder than it has to be... the trick is to think outside of the box. Instead of applying background colors to these columns, for example, the background color is applied to the wrapper and the margin in between the two is actually a left-side border on the floated content div.</p>
<p>To help illustrate this, here is some latin text! Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
</div>
<div id="subcontent">
<h2>Sub Content</h2>
<p>A very short paragraph. Yet the height is the same as the other, longer paragraph.</p>
</div>
</div>

</body>
</html>

Link to example (http://richardmedek.com/temp/example7.htm). (if you're using IE you'll have to place a clearing div to clear the float) Hope this helps,



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum