css background color with floating elements

Question

Let's say we have this very simple scenario

 <div class="content">
    <div class="left">
       <p>some content</p>
    </div>
    <div class="right">
       <p>some content</p>
    </div>
 </div>

 <div class="content">
    <div class="left">
       <p>some content</p>
    </div>
    <div class="right">
       <p>some content</p>
    </div>
 </div>

And this is the styling:

 .content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
 }

 .left {
     float: left;
     height: 300px;
     background: green;
 }

 .right {
     float: right;
     background: yellow;
 }

And the thing is... when I add content to <div class="right"> it should pull down the parent div, and we need to see the red background... the thing is, I cannot see the red background fill all the height.

EDIT: here is a fiddle to test

Josh Crozier · Accepted Answer · 2013-11-24T20:02:07.920

60

When the children elements are floated, they are taken out of the flow of the document. In doing so, the parent no longer has defined dimensions, as the children aren't technically occupying space. Thus, the parent element collapses upon itself. The same thing occurs when absolutely positioning the children elements too.

In this instance, we can fix it by adding overflow:hidden to the parent element, thus forcing it to contain the children elements. Alternatively overflow:auto works just as well. Some may suggest it is even better than overflow:hidden as you will be able to tell if any calculations are off.

jsFiddle example

.content {
    overflow:hidden;
}

Now the parent element is no longer collapsed and the red background is visible.

You could alternatively use a clearfix if you are looking for support in older browsers, but I don't recommend doing so.

edited Nov 24 '13 at 20:02

answered Nov 24 '13 at 19:54

Josh Crozier

233,099
56
391
304

Yeah, maybe first option would be to use a clearfix, however it was a question I got asked on an interview and I had not choice to add an extra html element. At the moment I thought about adding something like adding the after pseudo to the content element and at a clear:both, but didn't work. – andresmijares Nov 24 '13 at 20:05
Yeah, content not receiving enough info about its parameters, so is defaulting to showing a 0px height, but letting internal content flow onto the rest of the page. http://jsfiddle.net/andresmijares/8sQdy/ – Thomas Cheney Nov 24 '13 at 20:05

Alexander Schranz · Answer 2 · 2014-01-25T21:12:45.683

1

I use a empty clear div at the end of the content container

added CSS:

.clear {
    clear: both;
}

HTML:

<div class="content">
    <div class="left">
        <p>some content</p>
    </div>
    <div class="right">
        <p>some content</p>
    </div>
    <div class="clear"></div>
</div>

edited Jan 25 '14 at 21:12

answered Nov 24 '13 at 20:21

Alexander Schranz

2,154
2
25
42

yes that would be the 1st thinking solution, however I am not able to add an extra html element... maybe something with the right:after would work – andresmijares Nov 24 '13 at 21:02

abu sayed · Answer 3 · 2023-08-14T19:09:23.933

1

Because floated elements are taken away from the normal flow they take up no space in the parent container. So if a container has only floated elements, its height will be 0px as all floated elements are taken away from the container. For this reason, the background color of the container is disappeared. You may add display: flow-root in your content container to solve the problem.

edited Aug 14 '23 at 19:09

answered Aug 14 '23 at 18:53

abu sayed

11
3

score 0 · Answer 4 · answered Mar 24 '19 at 17:17

you can try this solution

.content:before, .content:after {
    content: " ";
    display: table;
    clear: both;
 }

or add display:table to content div:

.content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
    display: table; 
}

score -2 · Answer 5 · answered Nov 24 '13 at 19:50

-2

how about setting your margin and padding to 0 on ALL divs?

answered Nov 24 '13 at 19:50

Sorunome

478
4
8

Andriy Ivaneyko · Answer 6 · 2013-11-24T20:12:24.427

-2

Try to close all brackets for class names in html layout and add css property float:left to css style of .content class http://jsfiddle.net/u3W79/

edited Nov 24 '13 at 20:12

answered Nov 24 '13 at 20:07

Andriy Ivaneyko

20,639
6
60
82

css background color with floating elements

6 Answers6

Linked

Related