Originally Posted by
webdev1958
With js off in the browser, the columns' content and styles (borders, bg colours etc) will still show up. It's just that the column heights will not be equal if js is turned off.
This is a demo of using js to set equal column heights. You can have as many columns as you like without having to touch the js.
Yes that's a neat little script and thanks for sharing 
Not to be picky but I do have a couple of issues with it.
What happens when the user resizes the text? The layout is fixed to the pixel height you set so it won't grow and the text will overlap. The same issue would be apparent for fluid columns and should the window be resized then the columns won't grow and the content will spill out.
You would therefore need to add some onresize rules to cater for this but then you end up with a sluggish screen and one that appears to jump into position at each window change. As soon as you start digging into the detail it becomes less simple that the demo above for a real world application.
It's probably fine for the odd few elements but a page really needs to resize with the text or change with the window size.
Of course you could limit the problem by giving the routine to just ie7 and under and let others use display:table instead.
e.g. Exactly the same html as yours:
Code:
<!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>
<title></title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style-type: none
}
#container {
border: 1px solid red;
width: 800px;
overflow: hidden;
margin: 0 auto;
display:table;
border-spacing:20px;
}
/* sidebar's and content's padding values must be the same */
#sidebar {
margin:0;
padding: 10px;
border: 1px solid green;
width: 250px;
display:table-cell;
vertical-align:top;
}
#content {
margin:0 0 10px 0;
padding: 10px;
border: 1px solid blue;
width: 490px;
display:table-cell;
vertical-align:top;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#container {padding: 20px}
#sidebar{float:left}
#content{float:right}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="sidebar">
<ul id="menu_list">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
</ul>
</div>
<div id="content">
<div> Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor,
volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec
ante sed, ac turpis dis dui vestibulum aut. </div>
</div>
</div>
<!--[if lt IE 8]>
<script type="text/javascript">
window.onload=function() {
var maxHeight = 0;
var colsA = document.getElementById("container").childNodes;
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].clientHeight > maxHeight) maxHeight = colsA[i].clientHeight;
}
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].nodeType == 1) colsA[i].style.height = maxHeight+'px';
}
}
</script>
<![endif]-->
</body>
</html>
I'm sure you could update your script to size in ems instead and cater for resize and that would go some way to address the issues I mentioned but then it no longer becomes a simple fix.
There are other css methods that will work back to ie6 for multiple equal columns but they aren't really simple either and have the downside that the html needs to be altered. Here's an old demo showing the technique in action.
The "faux column" approach as already mentioned is pretty easy to implement and doesn't usually add to the html but of course doesn't allow you to change the design easily and gets complicated if you want separate or fluid columns.
In the end it's a matter of choice (unless you don't need to support older browsers) as there are pros and cons to each method.
Originally Posted by
ShinVe
(This is a basic two column layout, or so I thought.)
Think again
There is no reason why an unrelated column in css should automatically resize with a neighbour (although css3 does have the tools for this with the flexible box layout and also the aforementioned display:table properties (ie8+)).
Reply With Quote
Bookmarks