Forum Moderators: not2easy
This is an issue which has been a bother for me for ages, but I've always got around it with creative use of min-height and background colors.
The problem...
Getting a container div to properly contain it's floated child divs, when there is no other content. This can be fixed for Firefox simply by adding a clear on a <br> tag just before the closing tag.
I now notice this does not work for IE7 though (I was hoping it might do!)
What is the best way to try and resolve this for IE7, 6 & 5? For info I use conditional comments to direct specific styles to each different version of IE, so perhaps this could be utilised for any solution or hacks needed?
The code...
#container{background-color:#f00;}
#rightcol{width:48%; float:right; background-color:#ff0;}
#leftcol{width:48%; float:left; background-color:#cff;}
.clear{clear:both;}
<body>
<div id="container">
<div id="rightcol">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nunc. Morbi justo. Proin a nisi. Aliquam ac mauris. Praesent laoreet libero ut urna. Suspendisse quis justo. Praesent ac lacus quis nibh tristique tempor. Pellentesque a metus. Donec posuere est vel urna. Fusce augue ipsum, viverra sed, vestibulum quis, aliquet nec, leo. Morbi mi pede, tincidunt vel, luctus id, pulvinar quis, ligula. Nam vel justo hendrerit diam volutpat luctus. Sed et sapien. Donec suscipit tincidunt sapien.</div>
<div id="leftcol">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nunc. Morbi justo. Proin a nisi. Aliquam ac mauris. </div>
<br class="clear">
</div>
</body>
[edited by: HelenDev at 5:06 pm (utc) on Mar. 20, 2007]
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display:inline-block;}
/* Don't show IE (Mac) \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
and then ...
<div id="container" class="clearfix">
Nasty hack, but it works.
However, be VERY aware of the disappearing text bug in IE6. If you forget to explicitly set the width (or any other property that triggers hasLayout, like the display: inline-block; mentioned one post above) of a container, you might trigger a hasLayout=0, which will cause really alien stuff to happen in IE6.
So here is what I came up with, which seems to work in Firefox, IE7,6 & 5...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container{background-color:#f00; min-height:100px;}
#rightcol{width:48%; float:right; background-color:#ff0;}
#leftcol{width:48%; float:left; background-color:#cff;}
.clear{clear:both;}
</style>
<!--[if IE 6]>
<style type="text/css" media="all">
#container{height:100px;}
</style>
<![endif]-->
<!--[if IE 5]>
<style type="text/css" media="all">
#container{height:100px;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="rightcol"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nunc. Morbi justo. Proin a nisi. Aliquam ac mauris. Praesent laoreet libero ut urna. Suspendisse quis justo. Praesent ac lacus quis nibh tristique tempor. Pellentesque a metus. Donec posuere est vel urna. Fusce augue ipsum, viverra sed, vestibulum quis, aliquet nec, leo. Morbi mi pede, tincidunt vel, luctus id, pulvinar quis, ligula. Nam vel justo hendrerit diam volutpat luctus. Sed et sapien. Donec suscipit tincidunt sapien.</p></div>
<div id="leftcol">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nunc.
Morbi justo. Proin a nisi. Aliquam ac mauris. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Integer nunc. Morbi justo. Proin a nisi. Aliquam
ac mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer
nunc. Morbi justo. Proin a nisi. Aliquam ac mauris. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Integer nunc. Morbi justo. Proin a nisi.
Aliquam ac mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Integer nunc. Morbi justo. Proin a nisi. Aliquam ac mauris. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Integer nunc. Morbi justo.
Proin a nisi. Aliquam ac mauris. </p>
</div>
<br class="clear">
</div>
</body>
</html>
This is good, but I'd be really laughing if I could suss out how to get 100% heights on these divs. I came upon papabaer's great post at [webmasterworld.com ] and tried adding height 100% on the <body> and all nested divs but with no joy :(
Does anyone know if this can be done with my layout, or does it only work with absolutely positioned stuff?
[edited by: HelenDev at 10:26 am (utc) on Mar. 21, 2007]
