CSS and Page collapse

Question

Question # 1 → 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

Question #2→ 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;
}

What you want to achieve actually here? Do you want the footer outside the pagewrap div? Please give a clear explaination . — Sahil Dhir, Jan 30 '17 at 05:50
I am just trying different options to learn. Yes you can say I want footer out for now. — WordCent, Jan 30 '17 at 05:54
I think when you changed id to class pagewrap you didn't change all the pagewrap id in css file. There is 3 pagewrap id in css file. — Gaslan, Jan 30 '17 at 05:56
But they are independent ID's are they Inter-related? Any restriction that all id's or all classes. — WordCent, Jan 30 '17 at 05:58

Abhishek Pandey · Accepted Answer · 2017-01-30T06:05:52.680

This is happening because of float property on child elements of pagewrap, use .clearfix on pagewrap.

And for Question 2 you just need to update all pagewrap selector from ID to Class

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
 body {
  font-family: 'Open Sans', sans-serif;
  color: #666;
}
/* STRUCTURE */

#pagewrap {
  padding: 15px;
  max-width: 1400px;
  margin: 20px auto;
}
header {
  height: 100px;
  padding: 0 15px;
}
#content {
  width: 66%;
  float: left;
  padding: 5px 15px;
}
#sidebar {
  width: 28%;
  padding: 5px 15px;
  float: right;
}
footer {
  clear: both;
  padding: 0 15px;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

/* for 980px or less */

@media screen and (max-width: 980px) {
  #pagewrap {
    width: 94%;
  }
  #content {
    width: 91.5%;
    padding: 1% 4%;
    float: left;
  }
  #sidebar {
    clear: both;
    padding: 1% 4%;
    width: auto;
    float: right;
  }
  header,
  footer {
    padding: 1% 4%;
  }
}
/* for 700px or less */

@media screen and (max-width: 600px) {
  #content {
    width: auto;
    float: none;
  }
  #sidebar {
    width: auto;
    float: none;
  }
}
/* for 480px or less */

@media screen and (max-width: 480px) {
  header {
    height: auto;
  }
  h1 {
    font-size: 2em;
  }
  #sidebar {
    display: none;
  }
}
#content {
  background: #f8f8f8;
}
#sidebar {
  background: #f0efef;
}
header,
#content,
#middle,
#sidebar {
  margin-bottom: 5px;
}
#pagewrap,
header,
#content,
#middle,
#sidebar,
footer {
  border: solid 1px #ccc;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

<div id="pagewrap" class="clearfix">
  <header>
    <h1>2 Column Responsive Layout</h1>
  </header>
  <section id="content">
    <h2>1st Content Area</h2>
    <p>This page demonstrates a 2 column responsive layout, complete with responsive images and jquery slideshow.</p>
  </section>
  <aside id="sidebar">
    <h2>2nd Content Area</h2>
    <p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
  </aside>
  <!--       <footer>
        <h4>Footer</h4>
        <p>Footer text</p>
      </footer> -->
</div>
<!-- end-of-pagewrap -->
<footer>
  <h4>Footer</h4>
  <p>Footer text</p>
</footer>

You have defined .clearfix:after; what about .clearfix standalone? — WordCent, Jan 30 '17 at 05:55

score 0 · Answer 2 · answered Jan 30 '17 at 06:02

0

And as Abhishek cleared it out for you as your Q#2 you define style for #pagewrap in different section of your CSS file that you forget to edit. That's why some of styles disappear when you change to class system.

answered Jan 30 '17 at 06:02

moay

65
1
10

score 0 · Answer 3 · answered Jan 30 '17 at 06:10

This is surely happening because of float properties. Using clearfix is the right approach. But if you don't want to use clearfix then remove float and use display properties.
For second option why its not working - Its because you have to replace every #pagewrap to .pagewrap in your css.

score 0 · Answer 4 · edited May 23 '17 at 12:16

When elements inside a parent container are floated the parent container ignores their heights. To solve this problem the most basic method is to use an empty div with clear:both property inside the parent container after the floated elemets. A more neater way is to use clearfix

You've used clear:both property on footer but it will only clear the floats when it is inside pagewrap(parent container) as outside pagewrap, footer is no longer its child element.

For the second problem just update all #pagewrap to .pagewrap

CSS and Page collapse

4 Answers4