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

Question

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;
}

Jacob · Accepted Answer · 2012-02-06 23:26:23Z

5

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>

answered Feb 6, 2012 at 23:26

Jacob

79k24 gold badges159 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DA. · Accepted Answer · 2012-02-06 23:25:25Z

3

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;
}

answered Feb 6, 2012 at 23:25

DA.

40.8k51 gold badges162 silver badges219 bronze badges

7 Comments

PAULDAWG Over a year ago

overflow:auto just enables scroll bars from this description w3schools.com/cssref/pr_pos_overflow.asp. With all due respect, I don't know how this is the answer.

DA. Over a year ago

@PAULDAWG with all due respect, some googling will show you plenty of examples of documentation of this: google.com/search?q=contain+floats+with+overflow%3A+auto

PAULDAWG Over a year ago

some caveots I read on one of those results:The tricky bits A few points merit extra attention: The trick works with three of the four overflow values: auto, hidden and scroll. Of course, using the last value will show scrollbars, regardless of whether they're needed or not. Some browsers also need a width or height for the container div. The browser may show scrollbars when the content escapes beyond the specified width.

PAULDAWG Over a year ago

Interesting solution, though. I had not heard of that, thanks

DA. Over a year ago

oh, and yea, usually old versions of IE need the addition of a width attribute. Nothing new there, though...IE is always a mess of hacks...

|

Eric Witchin · Accepted Answer · 2012-02-06 23:25:49Z

3

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.

answered Feb 6, 2012 at 23:25

Eric Witchin

5742 silver badges8 bronze badges

1 Comment

DA. Over a year ago

Specifically, when you float something, it takes it out of the document flow, hence the parent element isn't aware of the dimensions of the child (until, as point out, you contain them somehow). While an additional element can be used for that, the common approach is to give the parent element an overflow property. This forces the parent to contain the floated children.

PAULDAWG · Accepted Answer · 2012-02-06 23:40:50Z

1

    <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>

edited Feb 6, 2012 at 23:40

answered Feb 6, 2012 at 23:22

PAULDAWG

7905 silver badges21 bronze badges

9 Comments

jorame Over a year ago

My other divs don't have a background, they take the background from the "page" div. My body background is different than the "page's" div.

PAULDAWG Over a year ago

sorry, your question was worded oddly. i thought it was about the color. see my revised for your answer.

PAULDAWG Over a year ago

You can tweak the colors and heights, should be able to do a min-height to ensure that there will always be that much height.

jorame Over a year ago

You are right, I just checked and its creating scrolling bars. I don't want that. You said that I need to height to the #content, what if the content grows over 600px?

PAULDAWG Over a year ago

use min-height:600px then it will grow in height as needed.

|

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

7 Comments

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

7 Comments

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related