15 replies [Last post]
Accident Prone
Offline
newbie
Last seen: 15 years 17 weeks ago
Joined: 2005-10-04
Posts: 9
Points: 0

Please read. This problem is probably harder than you think.

I need to create this without using tables:

Each column has a width of 33%. Each vertical line must extend to the bottom of the tallest column and be able to move with the dynamic width of the columns. (this is the hard part). Which column is the tallest will change so it has to work for any column being the tallest.

Currently, I have a 3 column layout using floats. Then I use a clearing div to push the container around the floats. Then I absolutely position the 2 vertical lines inside the container and give the lines height: 100% to make them the height of the container.

In IE, it doesn't understand that it should be the height of the container. It makes the lines the height of the page. I've tried using the expression function to determine the height in IE but that's not working for some reason.

Here's what I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
	html,body {
		height: 100%;
	}
	div#container{
		border: 2px solid yellow;
		position: relative;
	}
	div#container div#columns div{
		float: left;
		width: 33%;
	}
	div#container div#clear{
		clear: both;
	}
	div#lines div{
		width: 5px;
		background: black;
		height: 100% !important;
		height:expression(document.getElementById("container").style.height + "px");
		position: absolute;
		top: 0;
	}
	div#lines div#line1{
		left: 33%;
	}
	div#lines div#line2{
		left: 66%;
	}
</style>
<body>

<div id="container">
	<div id="columns">
		<div id="column1">
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
		</div>
		<div id="column2">
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
		</div>
		<div id="column3">
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
			asdf asdf asdf asdf
		</div>
	</div>
	<div id="clear"></div>
	<div id="lines">
		<div id="line1"></div>
		<div id="line2"></div>
	</div>
</div>
</body>
</html>

(I realize the code isn't formatted perfectly. I'm just trying to get the concept working first)

Any help would be greatly appreciated. I've already spent hours trying to figure this one out.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

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.

Accident Prone
Offline
newbie
Last seen: 15 years 17 weeks ago
Joined: 2005-10-04
Posts: 9
Points: 0

CSS Liquid Columns

Lorraine wrote:
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.

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.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

CSS Liquid Columns

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

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?

Accident Prone
Offline
newbie
Last seen: 15 years 17 weeks ago
Joined: 2005-10-04
Posts: 9
Points: 0

CSS Liquid Columns

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

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.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

CSS Liquid Columns

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

Accident Prone
Offline
newbie
Last seen: 15 years 17 weeks ago
Joined: 2005-10-04
Posts: 9
Points: 0

CSS Liquid Columns

Lorraine wrote:
I refer the honourable poster to the reply I gave earlier Smile .
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?

Accident Prone
Offline
newbie
Last seen: 15 years 17 weeks ago
Joined: 2005-10-04
Posts: 9
Points: 0

CSS Liquid Columns

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.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

CSS Liquid Columns

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 Tongue

newseed
Offline
Regular
Last seen: 12 years 43 weeks ago
Timezone: GMT-5
Joined: 2005-10-04
Posts: 15
Points: 0

CSS Liquid Columns

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>

Accident Prone
Offline
newbie
Last seen: 15 years 17 weeks ago
Joined: 2005-10-04
Posts: 9
Points: 0

CSS Liquid Columns

newseed wrote:
Give this a whirl. *snip*

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.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

CSS Liquid Columns

@ 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. Smile

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS Liquid Columns

Hi

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

Trevor

newseed
Offline
Regular
Last seen: 12 years 43 weeks ago
Timezone: GMT-5
Joined: 2005-10-04
Posts: 15
Points: 0

CSS Liquid Columns

Lorraine wrote:
@ 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. Smile

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.

Accident Prone
Offline
newbie
Last seen: 15 years 17 weeks ago
Joined: 2005-10-04
Posts: 9
Points: 0

CSS Liquid Columns

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

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.

Accident Prone
Offline
newbie
Last seen: 15 years 17 weeks ago
Joined: 2005-10-04
Posts: 9
Points: 0

CSS Liquid Columns

ClevaTreva wrote:
Hi
Take a whiz to pmob.co.uk for how to do it in all browsers.
Trevor

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. Smile

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.