CODEWITHSUNDEEP
htmlcsscss-position
Jonathan Lam
Jonathan Lam

Reputation: 17351

Why is this div element encapsulated by the previous div element?

In this JSfiddle that I was playing around with, I made a div#footer that started to behave weirdly.

For now, its CSS is set to:

div#footer {
    width: calc(100% + 100px);
    margin-left: -50px;
    text-align: center;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.8);
}

It's positioned staticly and supposed to sit below the other <div>s, which are the div#header and div#body. But for some reason, it seems as though it takes up the div#body as well. See this image, for example:

screenshot

Notice how the box-shadow effect is applying to the entire div#body element. The bottom two centered lines should be all of the div#footer.

div#body is also set to position:static (default). I didn't add any specific styles to it (but I did to some of its children elements).

I don't know what's going on -- this has never happened to me before. The full code is on the JSfiddle, but it's too much for me to post here. Any ideas on what is happening and solutions? Thanks.

Upvotes: 1

Views: 380

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371241

It appears that you're missing a clearfix solution for the div#body element, as it has children that are floated. Try this:

div#body {
    overflow: auto;
}

DEMO (with borders added for illustration)

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240938

It's because the div#body element is collapsing upon itself.

When elements are absolutely positioned or floated (as in your case), they are removed from the normal flow of the document. Here is relevant documentation confirming this:

9 Visual formatting model - 9.5 Floats

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

In your case, all the direct children elements of the div#body element are floated. Due to this, the div#body element essentially collapses upon it self since it doesn't have any dimensions.

You need to apply a clearfix to the div#body element, for instance:

Updated Example

#body {
  overflow: auto;
}

or:

Updated Example

#body:after {
  content: '';
  clear: both;
  display: table;
}

Alternatively, you could also add clear: both to the #footer element:

Updated Example

#footer {
  clear: both;
}

Upvotes: 2

Related Questions