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

Question

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:

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.

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

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

I've heard of this, but I didn't know what it meant. Thanks! — Jonathan Lam, Nov 26 '15 at 00:24

score 1 · Answer 2 · edited May 23 '17 at 12:30

1

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)

edited May 23 '17 at 12:30

Community

1
1

answered Nov 26 '15 at 00:05

Michael Benjamin

346,931
104
581
701

1

Thanks for your answer! – Jonathan Lam Nov 26 '15 at 00:23

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

2 Answers2