Forum Moderators: not2easy
<style>
body,ul,li {
margin: 0px;
padding: 0px;
}
div#box {
margin: auto;
width: 500px;
background: green;
border: 1px solid #000;
}
ul {
margin: auto;
list-style-type: none;
width: 450px;
display: inline;
background: red;
border: 1px solid #000;
}
li {
float: left;
display: block;
width: 210px;
height: 300px;
margin: 10px;
background: #ddd;
}
</style>
<div id="box">
<ul>
<li>this little piggy went to</li>
<li>the market</li>
<li>urban outfitters</li>
<li>dubai</li>
<li>six arms</li>
<li>the arboretum</li>
</ul>
</div>
- I know it is not correct to expect div#box to extend down to contain this floated list. -
But I really want it to! haha. Is there any way to get div#box to contain the floated list within it?
Thanks for any help!
There are other methods of clearing floats, but this one's rock solid on any browsers you're likely to come across in the wild.
That is the simple solution that I knew was out there.
Thank you very much for your help!
Long live good ole' <br />
but this one's rock solid on any browsers
[edited by: DanA at 6:01 pm (utc) on April 11, 2007]
I have a feeling it's maybe simple over-reliance on haslayout, mostly in these clear float situations the "wrapper" or float container has a width - if it does then clearance is not provided by the <br> but by the layout on the container.
you can try a simple example by removing the width off the container then try clearing the floats with a <br>
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css" media="screen">
html, body {margin: 0px; padding: 0px;}
#wrapper {background: green;}
#left {float: left; width: 300px; background: #f00;}
#right {float: right; width: 300px; background: #dad;}
.clear {clear: both;}
</style>
</head>
<div id="wrapper">
<div id="left">left content<br />left content<br />left content</div>
<div id="right">right content<br />right content<br />right content</div>
<br class="clear" />
</div>
</body>
</html>
if you have any real content after the br then you're good to go, but the br alone won't do it.
[edited by: SuzyUK at 8:57 pm (utc) on April 11, 2007]
I have a feeling it's maybe simple over-reliance on haslayout
