CSS Forum

**Valiant** · 02-17-2008, 02:53 PM

Hi, im floating a couple of divs inside a container.

The problem is, is that they are overlapping it and not staying in side. So that when i add data the floats height increases but not the container.

Screen Shot: http://sixpop.com/images/file/14694217.jpg

Html:

Code:

<!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=utf-8" />
<title>No Title</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="profilewrap">
<div id="block12">
STUFF
<div id="leftblock"></div>

<div id="righblock">
</div>

</div>

</body>
</html>

Css:

Code:

body{
background: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 0px;
padding: 0px;
text-align: center;
}
#profilewrap{
}
#block12{
background: #000;
color: #fff;
padding: 5px;
width: 750px;
text-align: left;
margin: 0 auto;
}

#leftblock{
width: 375px;
float: left;
margin: 0;
}
#righblock{
width: 375px;
float: right;
margin: 0;
}

Please help!, thanks in advanced!!!!!!

**bas** · 03:13 PM

First of all, you forgot to close a div! It has to be:

HTML Code:

<div id="profilewrap">
  <div id="block12">
STUFF
    <div id="leftblock"></div>
    <div id="righblock"></div>
  </div>
</div>

Secondly, in XHTML every element has to be closed, so:

HTML Code:

<link rel="stylesheet" type="text/css" href="css.css" />

Now to resolve your problem with the overlapping div, you can add an element at the bottom of the container div, and give that element with css the property "clear:both; ".

For example, a break-element:

HTML Code:

<!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=utf-8" />
<title>No Title</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="profilewrap">
<div id="block12">
STUFF
<div id="leftblock"></div>

<div id="righblock">
</div>
<br class="clearer">
</div>
</div>

</body>
</html>

CSS:

Code:

.clearer {
clear:both;
}

**LadynRed** · 02-18-2008, 03:36 PM

The point is, you must learn to CLEAR YOUR FLOATS - more here:
http://css-discuss.incutio.com/?page=ClearingSpace