a div does not get pushed out by a div inside it???

liunx · Jan 12, 2008

Hi,

For some reason the div "centre_boxes" does not push get pushed out by a div inside it. If you load this code you will see what i mean.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.centre_boxes {
margin:15px 0 0 0;
position:relative;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
background-image:url(images/infoback.jpg);
background-repeat:no-repeat;
padding:0 5px 3px 5px;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color:#000000;
}

.product_boxes {
position:relative;
width:178px;
border:1px solid #CCCCCC;
float:left;
}
</style>
</head>
<body>
<div class="centre_boxes">
<p>Categories</p>

<div class="product_boxes">
<p>Test of the bloody century</p>
</div>
</div>
</body>
</html>

I want it so that the centre_div gets pushed down the the product_boxes are all firmly inside the centre_div

Thanks
k0r54When you float an element, you take it out of the normal flow of objects. What I usually do is stick a 1-pixel-high clearing div at the bottom of the containing div:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.centre_boxes {
margin:15px 0 0 0;
position:relative;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
background-image:url(images/infoback.jpg);
background-repeat:no-repeat;
padding:0 5px 3px 5px;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color:#000000;
}

.product_boxes {
position:relative;
width:178px;
border:1px solid #CCCCCC;
float:left;
}
/* use this class in a div to "clear the floats" */
.clear {
height: 1px;
font-size: 1px;
line-height: 1px;
margin: 0;
padding: 0;
clear: both; /* the important part */
}
</style>
</head>
<body>
<div class="centre_boxes">
<p>Categories</p>

<div class="product_boxes">
<p>Test of the bloody century</p>
</div>
<div class="clear"></div> 
</div>
</body>
</html>

many thanks nog dog, usfull tip

a div does not get pushed out by a div inside it???

liunx

Guest