Design Gets Broken →

Here is the Code Pen link → Click Here.
When I put footer out of the main div with id=“pagewrap”

       <footer>
        <h4>Footer</h4>
        <p>Footer text</p>
      </footer>
   </div><!-- end-of-pagewrap -->

If I do this →

 </div><!-- end-of-pagewrap -->
        <footer>
        <h4>Footer</h4>
        <p>Footer text</p>
      </footer>

Its get broken like this → https://www.screencast.com/t/VXRFGVa30


I have more concern to discuss.

<div id="pagewrap">

#pagewrap {
  padding: 15px;
  max-width: 1400px;
  margin: 20px auto;
}

But if I change this to class system the padding or border disappears. what goes wrong? the CSS is the same?

<div class="pagewrap">

.pagewrap {
  padding: 15px;
  max-width: 1400px;
  margin: 20px auto;
}

Hi,

I assume you are talking about your failure to contain your floats?

Floats are removed from the flow so a parent will not encompass them unless the parent creates a new block formatting context or you have content that clears the float but is still inside the same parent.

Google clearfix, containing float and ‘block formatting contexts’ to learn all about this problem.

A simple fix is to create a 'new block formatting context’ with display:table (although its the anonymously generated display:table-cell that is the actual block formatting context).

#pagewrap {
  padding: 15px;
  max-width: 1400px;
  margin: 20px auto;
  display:table;
  width:100%;/* needed as tables are shrink to fit*/
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

It shouldn’t make any difference as there are no other rules targeting that element so specificity is not an issue. I;m guessing you forgot to change all the css where you have used #pagewrap (in your media queries etc).

Thanks. I searched and got an excellent link, and now realized what was going wrong.

I am a little bit confused. So that means declare anywhere ant it will clear the floats as in the case of my pen. clear was declared in the footer, and till the time footer was inside the main wrapper div, things were fine, but as soon as I took footer out of the wrapper div the parent wrapper div collapsed. That means clearfix or clear can be declared anywhere either in the parent div or in the child container such as footer?

Just remember floats are removed from the flow like absolute elements so a parent that contains only floats will have zero height so that means the parents backgrounds or borders will not encompass the floats.

If you apply clear:both to an element that follows after the floats but still in the same parent then the parent recognises that cleared element and puts its arms around it and all is well.

The ‘clearfix’ method uses the pseudo element :after to place content at the end of the container and then applies clear:both to it. Its practically the same as if you added an empty div at the end of the container and added clear:both to it. That’s basically all the clearfix does (ignoring margin-collapse and other side issues).

The method I offered you was to create a new block formatting context and in this context the parent automatically recognises its child floats and encompasses them. I used display:table top do this but there are other properties such as overflow other than visible which will also contain floats but has the side effect of not allowing content to extend outside the container.

The method you use depends on the situation in hand.

If your fotter was inside the container then adding clear:both to it is fine. However if you want your footer outside the container then you will need to use one of the containing methods mentioned above.

3 Likes

Can you Please guide me what should I research to understand this?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.