CODEWITHSUNDEEP
htmlcsscss-float
jorame
jorame

Reputation: 2207

Having issues with floating divs in HTML using the CSS property "float"?

I have an issue with my divs. I currently have four “divs” in html that look like below. What I want to do is have everything in my page inside the “page” div. Inside the “main” div I have the “content” and “side” div and both have the “float:left” property from CSS. What’s happing is that when I do this I lose the background of my “page” div which is white. How can I prevent this and create my content and side divs? I know this is easy but for some reason I’m not getting it right. Any help will be appreciated.

Thanks 

<div id=”page”>
   <div id=”container”>
   </div>
   <div id=”main”>
      <div id=”content”>
      </div>
      <div id=”side”>
      </div>
   </div>
</div>

This is my CSS code

#page 
{
margin: 2em auto;
max-width: 1000px;
background-color:#fff;
}

#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
}

#content 
{
clear: both;
padding: 1.625em 0 0;
width:740PX;;
float:left;
}

#side
{
width:250px;
margin:5px;
float:left;
}

Upvotes: 2

Views: 764

Answers (4)

PAULDAWG
PAULDAWG

Reputation: 790

    <html><head>
<style type="text/css">
#page 
{
margin: 2em auto;
max-width: 1000px;
width:1000px;
background-color:#000;
height:600px;
}

#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
background-color:#fff;
}

#content 
{
clear: both;
padding: 1.625em 0 0;
width:740px;
height:200px
float:left;
background-color:blue;
}

#side
{
width:250px;
height:100px;
margin:5px;
float:left;
background-color:yellow;
}
</style>
</head>

<body>
<div id="page">
   <div id="container">
   </div>
   <div id="main">
      <div id="content">
      </div>
      <div id="side">
      </div>
   </div>
</div>
</body>
</html>

Upvotes: 1

Jacob
Jacob

Reputation: 78840

The reason you lose the background of your div is because it only contains floating content, which causes it to have no height. Once something "clears" the floats, it will occupy space again. Try adding this after your main div (you can have the style in the style sheet instead):

<div style="clear: both;"></div>

Upvotes: 5

Eric Witchin
Eric Witchin

Reputation: 574

What I believe is happening is when you assign something a float, its "height" doesn't truly get represented to its parent element. Your page div now thinks that it has a height of nothing because of the floating elements within. Add a <br style="clear:both;height:1px" /> after you "side" div. Adding this will "clear" the floated div so their height is not fully represented.

This may not be your case, however I ran into this issue a few times myself and this usually fixed it.

Upvotes: 3

DA.
DA.

Reputation: 40671

You need to contain your floats. When you float an element, it takes it out of the document flow, so any parent container will just collapse if you don't tell it to contain the child floats.

To contain child floats, the easiest is to apply overflow: auto.

So try this:

#page {
    margin: 2em auto;
    max-width: 1000px;
    background-color:#fff;
    overflow: auto;
}

Upvotes: 3

Related Questions