PDA

Click to See Complete Forum and Search --> : float and clear problem

demiurgen
11-03-2007, 11:36 AM
what is it with this code i don't get:

<!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=UTF-8" />
<title>test</title>
<style type="text/css">
#main{
margin:50px auto;
padding:0;
width:1000px;
border:1px solid #000;
}
#content{
margin:10px;
padding:0;
border:1px solid #000;
/*just to see if any of them work...*/
clear:right;
clear:left;
clear:both;
}
#content p{
margin:10px;
padding:0;
}
#image{
margin:10px;
padding:0;
width:200px;
height:100px;
background-color:#996;
float:right;
/*just to see if any of them work...*/
clear:right;
clear:left;
clear:both;
}
</style>
</head>

<body>
<div id="main">
<div id="content">
<div id="image"></div>
<p>bla bla bla bla bla bla bla bla bla</p>
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
</div>
</div>
</body>
</html>

why isn't the content div following the height of the image?
or, why is the content div collapsing?

try the code yourself or see it here:
http://www.morganwaage.com/mp/test.html
Centauri
11-03-2007, 11:53 AM
The clear css property forces an element to which it is applied to clear floated elements above it. To force a container to surround floated content, you could put another element inside the container and after the content, and have clear set on that element. However, this adds a non-semantic element. The other way is to set the overflow property on the container - this forces the container to expand and enclose the floats to find out whether there is any overflow. Unfortunately, this does not work in IE6, but IE will incorrectly normally enclose floats when the container has HasLayout set, and this can be triggered if the container has a dimension. As IE6 will also incorrectly expand a div beyond a set height, a 1% height will work for IE, but the overflow needs to be reset back to visible :
#main{
margin:50px auto;
padding:0;
width:1000px;
border:1px solid #000;
}
#content{
margin:10px;
padding:0;
border:1px solid #000;
overflow: hidden;
}
* html #content{
height: 1%;
overflow: visible;
}
#content p{
margin:10px;
padding:0;
}
#image{
margin:10px;
padding:0;
width:200px;
height:100px;
background-color:#996;
float:right;
}
demiurgen
11-03-2007, 12:11 PM
nice!

thank you Centauri