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.
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.
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.
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.
CSS Liquid Columns
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?
CSS Liquid Columns
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?
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.
CSS Liquid Columns
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.
CSS Liquid Columns
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?
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.
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
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>
CSS Liquid Columns
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.
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.
CSS Liquid Columns
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.
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.
CSS Liquid Columns
@ 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.
CSS Liquid Columns
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.
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.