homepage Welcome to WebmasterWorld Guest from 54.205.254.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Equal Height Columns in CSS
Fortune Hunter




msg:3612936
 3:36 am on Mar 28, 2008 (gmt 0)

I have slowly (very slowly) been moving from table based layouts to CSS based layouts. I am far from a CSS wiz so this has been very slow going. I am working on a site now with a two column layout.

Both columns are different heights. I can't get both to work together to be the same height. After some research I discovered this is because both columns are independent of each other and don't work together. Each column ends where its content ends and doesn't have any relationship to the column next to it.

This is a very annoying trait for those of us used to tables where two columns worked together. After further research I found some hacks that will work around this short-coming. The main hack is a JavaScript that keeps track of both columns and forces them to be the same height.

On the site where I got this hack from it says that the CSS layout with the hacks isn't much better than using the old table layout with spacer graphics.

My question is that I hear how much better CSS layouts are and how superior they are to tables, but if you have to hack them to get them to do what you want with JavaScript how is this an improvement?

I guess I would like to know if the hack I am going to use is so bad I might as well stick to a table layout, it would seem from what I found both methods are bad, but one I am very familiar with (tables) and the other I am not (CSS with JavaScript) any reason not to stick with what I know since both seem to have shortcomings?

 

Mathieu Bonnet




msg:3613237
 12:48 pm on Mar 28, 2008 (gmt 0)

The most simple solution is what is generally called faux columns (use these keyword in search engines, if you want other examples other than mine, or more details).

The sidebar and the content share a border, with the same style, so that whichever column is longer, will show its border between the two columns, and it would seem as if the other column was of the same height (in reality, the other column stops sooner).

Here is an example (of course, it must be refined, but this works in standard browsers, and IE6... there are minor problems in IE5 and 5.5, but they should be quite easy to work around, if you really want to support these older browsers fully):


<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Test</title>

<style type="text/css">

body
{
min-width: 20em;
max-width: 40em;

margin: auto;
padding: 15px;
}

div#Main_container
{


border: 2px solid black;
}

div#Header
{
border-bottom: 2px solid black;
}

div#Sidebar_container
{
position: relative; /* IE-only */

float: left;

width: 14em;
}

div#Sidebar
{
position: relative; /* IE-only */

margin-right: -2px;
border-right: 2px solid black;
}

div.Sidebar_module
{
padding: 1em;
}

div.Sidebar_module h2
{
margin: 0;
padding: 0;
}

div#Content_container
{
margin-left: 14em;
}

div#Content
{
border-left: 2px solid black;
padding: 1em;
}

div#Content h2
{
margin: 0;
padding: 0;
}

div#Footer
{
clear: left;

border-top: 2px solid black;
}

</style>

</head>

<body>

<div id="Main_container">

<div id="Header">
<h1>Site title</h1>
</div>

<div id="Sidebar_container"><div id="Sidebar">

<div id="Main_menu" class="Sidebar_module">
<h2>Main menu</h2>
<ul>
<li>Pellentesque</li>
<li>Eros erat</li>
<li>Ullamcorper quis</li>
<li>Lacinia ut</li>
<li>Sodales in nunc</li>
<li>Integer auctor</li>
<li>Sapien sit amet</li>
</ul>
</div>
<div id="Random_stuff" class="Sidebar_module">
<h2>Random stuff</h2>
<p>Aliquam tellus quam, varius vitae, dignissim imperdiet, dapibus vitae, arcu.</p>
</div>
</div></div>

<div id="Content_container"><div id="Content">

<h2>Page title</h2>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
In vehicula, purus a cursus cursus, tortor arcu venenatis
velit, eu porta leo nisi in nunc. Nullam pellentesque.
Aliquam elementum, neque ac mattis convallis, turpis
tellus interdum justo, ac sagittis sapien nulla sit amet
metus. Etiam hendrerit hendrerit sapien. Vivamus at diam
id arcu commodo suscipit.
</p>
<p>
Aenean pharetra gravida turpis. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. In pretium, justo
at feugiat scelerisque, turpis nulla condimentum elit,
nec aliquet nulla leo vitae magna. In accumsan eros et
mi. Pellentesque eros erat, ullamcorper quis, lacinia ut,
sodales in, nunc.
</p>
<p>
Integer auctor, sapien sit amet hendrerit gravida, nisi
magna faucibus felis, vel ornare erat tortor eu justo.
Nam lacinia mauris luctus pede. Duis pulvinar dignissim
lacus. Cras pellentesque eros sed nulla. Nullam nibh.
Maecenas rutrum cursus arcu. Sed lorem lacus, varius a,
dapibus blandit, lobortis ac, massa. Fusce pharetra
vehicula eros. Sed lacinia, metus et pulvinar varius,
justo enim congue nunc, in dignissim libero odio et
libero. Duis accumsan consequat ipsum.
</p>

</div></div>

<div id="Footer">
<p>Footer</p>
</div>

</div>

</body>

</html>

[edited by: Mathieu_Bonnet at 12:51 pm (utc) on Mar. 28, 2008]

Fortune Hunter




msg:3614320
 7:11 pm on Mar 29, 2008 (gmt 0)

The most simple solution is what is generally called faux columns

I forgot to mention in my post that I found this solution as well. My problem with this solution that the "faux" part of the solution is fake, which means it isn't a real column, but looks like one. That would probably be ok, but in column two when my real text gets to be too long it begins to wrap under column one, with the faux in place it would just print my text over it and make it look stupid.

I guess I could extend the second column down to avoid this problem, but I guess I was hoping for a more elegant solution.

Mathieu Bonnet




msg:3614564
 7:26 am on Mar 30, 2008 (gmt 0)

That would probably be ok, but in column two when my real text gets to be too long it begins to wrap under column one, with the faux in place it would just print my text over it and make it look stupid.

Err... I don't know what you are talking about... it should not. Did you try my sample code? Maybe the other code you found wasn't complete.

The two columns can be extended vertically, independently, without any problem.

It is called faux columns, because one of the two columns really stops earlier than the other, but what is shown then, under the shorter column, is the container block of the two columns (in my sample, div#Main_container). This is true in both cases.

The content block is right-shifted (using its margin-left), so it does not cover the sidebar (and in the other case, the sidebar width is specified so it does not extend).

There are variants, of course, but they should all get you to the same result.

(By the way, you can use a background image, for div#Main_container, if you want some styles you cannot get with CSS, for the column backgrounds/borders... but you will have to specify pixel units, for the sidebar width, and the content block margin-left, which is not really good -well, it is possible to use some tricks, with a real image, using something like {position:fixed;width:100%;height:100%;} for the image, and {position:relative;z-index:1;} for the sidebar and content block, but it seems there are problems in MSIE (search for stretched+background+css in a search engine, for details)).

sjrw




msg:3614664
 12:31 pm on Mar 30, 2008 (gmt 0)

I was just interested in this one for a site I will be doing shortly, in which I really wanted to try out my new-found css "skills". I will be following this example. It is elegant and it works, which is the main thing.

Thank you, Mathieu

Fortune Hunter




msg:3615500
 5:19 pm on Mar 31, 2008 (gmt 0)

Did you try my sample code? Maybe the other code you found wasn't complete.

Definitely possible. I did not try your code, I was using a CSS layout code I already had. I am only a moderately decent coder so I guess I didn't see the difference at first. I will try your solution to see what my results are. Thank you for presenting.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved