Okay, here’s another situation. Suppose, I only want the right side content (that holds the main text) to expand vertically to a reasonable height as the outtermost parent container, no matter what happens to the ASIDE element, is that possible?
In some cases, I used overflow: hidden and it worked to achieve the above thing (thanks to ralph.m). But when I am going to apply overflow: hidden in the right side content (id’ed as “mainlist”), texts disappear as well as bgcolor and a scroll bar gets added to the browser. Why is this happening?
In fact, the above question was the burning question for me earlier, but none of you gave me the answer.
Yes it is happening in FF10 and all other browsers as soon as the container is smaller than that unbroken text. Just close the browser window smaller and you will see it happen
I used overflow: hidden and it worked to achieve the above thing (thanks to ralph.m). But when I am going to apply overflow: hidden in the right side content (id’ed as “mainlist”), texts disappear as well as bgcolor and a scroll bar gets added to the browser. Why is this happening?
You are misunderstanding what is happening here and overflow:hidden is not some magic cure to make equal columns. All it does is make a parent contain its child floats by creating a “new block formatting context” and then the parents background will extend around the floats. It does nothing for individual columns and applying it to an element will just mean that any overflow is hidden - it will not make that elements background grow in height.
Adding overflow:hidden to #mainlist serves no purpose other than to hide any overflow as #mainlist contains no child floats. The text then gets hidden in #mainlist because #mainlist sits under a float (header) and thus gets hidden due to the way text under a float is handled. There was no reason to float the header anyway.
With regard to your original question of equal columns then you still need to read the “faux column” links Ralph mentioned above but also look at an old demo of mine that explains equal columns in detail.
A child element will never stretch to the height of its parent unless you are using the display:table-cell properties. The overflow:hidden just makes the parent encompass the child floats and therefore the background of the parent is tall enough to contain its child floats. To make individual columns stretch to the height of the parent you need to use tricks like the faux column approach (repeating background images on the parent) or other clever negative margin techniques. Or if only IE8+ support is required you can use display:table and table-cell properites like this:
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
p { margin:0 0 1em; }
.wrap {
display:table;
border-spacing:4px;
}
.inner { display:table-row }
.cola, .colb, .colc {
width:150px;
padding:2em 0;
display:table-cell;
vertical-align:top;
background: green;
border:1px solid #000;
}
.colb { background: red; }
.colc { background: blue; }
</style>
<!--[if lte IE 7]>
<style type="text/css">
.wrap{float:left;clear:both}
.cola,
.colb,
.colc {
float:left;
}
</style>
<![endif]-->
</head>
<body>
<div class="wrap">
<div class="inner">
<div class="cola">
<p>This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text :</p>
</div>
<div class="colb">
<p>This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: </p>
</div>
<div class="colc">
<p>This is some text : This is some text: This is some text : This is some text: This is some text : This is some text: This is some text : </p>
</div>
</div>
</div>
</body>
</html>
