CSS Liquid Columns

Hi AP and welcome.

The beauty of CSS, as it begins to take off its nappies, is that some genius has probably already done what you want.
Consider this for a start:
http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/
If you want more, try Googling for equal-height columns or equal-height boxes.

Another technique that may also help you further down the line can be found at http://www.alistapart.com/articles/fauxcolumns . Here thay are talking about using background colors or images to achieve apparently equal-height columns. A small step in the imagination would enable you to use a background image (repeated vertically) to display the same lines that you have now.

The beauty of CSS, as it begins to take off its nappies, is that some genius has probably already done what you want.
Consider this for a start:
http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/
If you want more, try Googling for equal-height columns or equal-height boxes.

Another technique that may also help you further down the line can be found at http://www.alistapart.com/articles/fauxcolumns . Here thay are talking about using background colors or images to achieve apparently equal-height columns. A small step in the imagination would enable you to use a background image (repeated vertically) to display the same lines that you have now.

Well I quickly checked the links you gave me. The first demo didn't work in IE.

Backgroud images cannot be used because there are 3 dynamic columns (meaning 2 separately dynamic dividers). A background image would mean that not all of my columns could have dynamic width.

Thanks for the search term though, I will try and look for that.

that's right, don't just stop at the first one - there's oodles of them.

The faux column technique - now consider you have a small gif that is as wide as your vertical lines, say 10px and about 50px high. Apply that as a background image to the right of the left column and make it repeat vertically. The same image applied to the left of the right column and repeated vertically, will give you that "eureka moment".

If you want the background colours of the columns to be different, then produce a gif in the colour you want - make it wide enough to compensate for any fluidity/elasticity you may build in - add your black line to the left or the right as appropriate and apply to the relevant column.

It works, I assure you, but don't just take my word for it - why not try it yourself?

The faux column technique - now consider you have a small gif that is as wide as your vertical lines, say 10px and about 50px high. Apply that as a background image to the right of the left column and make it repeat vertically. The same image applied to the left of the right column and repeated vertically, will give you that "eureka moment".

If you want the background colours of the columns to be different, then produce a gif in the colour you want - make it wide enough to compensate for any fluidity/elasticity you may build in - add your black line to the left or the right as appropriate and apply to the relevant column.

It works, I assure you, but don't just take my word for it - why not try it yourself?
But the actual columns aren't all the same height. So applying that background-image to the columns will still make the dividers different heights because not all the columns are the same height.

I refer the honourable poster to the reply I gave earlier .
Read "faux" columns as in "false" columns - slightly different mindset/concept to boxed-columns.

Okay, but using that technique it's not possible to make both the dividers equal in length then. Correct?

Lorraine, you were right. It is the faux columns that I wanted.
I didn't think to put a container inside a container to apply more than 1 background-image.

http://www.communitymx.com/content/article.cfm?page=2&cid=AFC58

Thanks for the tip.

Thank goodness for that. I was just getting around to thinking there was nothing for it but to demonstrate it for you. Now I can get back to earning a living. Have fun with your falsies

Give this a whirl. The columns on the left and right are fixed width and the center column, banner and footer are liquid. You can twiddle with the width and the height for whatever suits your needs. It's been tested with the latest IE and Firefox browsers.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">

html, body {margin: 0px 5px 2px 5px;
height: 101%;
}

#container {height: 95%;
width: 98%;
\width: 98%;
w\idth: 98%;
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}

#banner {
padding: 5px;
margin-bottom: 5px;
background-color: rgb(213, 219, 225);
}

#content {height: 85%;
padding: 5px;
margin-left: 215px;
margin-right: 215px;
background-color: gray;
}

#sidebar-a {height: 85%;
float: left;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-right: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
}

#sidebar-b {height: 85%;
float: right;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-left: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
}

#footer {
clear: both;
padding: 5px;
margin-top: 5px;
background-color: rgb(213, 219, 225);
}
</style>
</head>

<body>
<div id="container">

<div id="banner">banner</div>

<div id="sidebar-a">left menu</div>

<div id="sidebar-b">right menu</div>

<div id="content">main content here</div>

<div id="footer">footer</div>

</div>
</body>
</html>

For this project, all the columns had to be a dynamic width. Where I work, the design gets approved before it has been coded and once approved, it's very difficult to change.

Anyways, thanks for the help.
Here's the Final Product.

The method to achieve this is pretty darn clever if you ask me. Check out this link for a great tutorial.

Thanks again for the help.

@ AP - pleased for you. newseed's solution does work dynamically as well - I've just tried it.

@ newseed - have you tried that cross browser with column content of unequal size? See attachments. I've used your original code at 800x600 ('cos I couldn't be bothered to put in more content) but I have placed a red border around #container so that you can see IE expands the height to contain the longest column. Fx and Opera do... well just what the code says.

Hi

Take a whiz to pmob.co.uk for how to do it in all browsers.

Trevor

@ newseed - have you tried that cross browser with column content of unequal size? See attachments. I've used your original code at 800x600 ('cos I couldn't be bothered to put in more content) but I have placed a red border around #container so that you can see IE expands the height to contain the longest column. Fx and Opera do... well just what the code says.

I haven't tried what you have just done but what I posted was a rough draft and had 1024x768 in mind. The post after yours is going to help me tweak the one I am working on now.

I love to see the day where we don't have to 'hack' the codes to make the pages visible correct on all browsers.

Yup you're right. It just didn't quite fit what I needed. I couldn't have it be the height of the browser window. I needed it to end after the content.

If you check out this site, is there any other way it could have done the three columns there? The method I used to overlap the backgrounds (like you told me earlier) is so cool. I'm really interested if there's more ways to accomplish the same look sans tables.

That link has an example very close to what I was trying to do with the fluid side columns and the middle one is static width.

Thanks for the link. I'll have to check the rest of those out.

edit: Oh found the one for what I was doing. That site is sweet. Thanks again.

That ones really clever too. If I'm understanding it correctly, you create divs that contain the background colors and then float divs outside of those with negative margins to create the columns where the actual content will go. Because the content divs are actually separated from their containers, all the content columns push all the background containers, making them all the same length.