Nested Articles "spill over" the section

Question

I try to nest 3 articels into a section. Why do they spill over the borders of the section?

The CSS:

article{
border-right:solid 1px grey;
height:50%;
width:30%;
float:left;
padding:0.5%;
text-align:center;
}

section{
border:dotted 1px blue;
margin-top:10px;
margin-bottom:40px;
}

The html:

<section>
  <h1>Schedule</h1>
  <article><h3>Thursday</h3>und so weiter und so fort</article>
  <article><h3>Friday</h3>so hübsch und so</article>
  <article><h3>Saturday</h3>das geht aber ab hier</article>
</section> 

Answer 1

That is because when you float the <article> element, they are taken out of the document flow. The parent will have no "internal height" to refer to, and therefore its height will collapse. To solve this, use the clearfix method^{[1, 2, 3, 4]} or simply declare overflow: hidden on the parent :)

section{
    border:dotted 1px blue;
    margin-top:10px;
    margin-bottom:40px;
    overflow: hidden;
}

http://jsfiddle.net/teddyrised/gx5tehrn/

p/s: This is not strictly related to your question, although it concerns your code: if you want to fill the width of the parent equally, you can use 33.333% width on the child and use the border-box box-sizing to ensure that the assigned width will include all borders and paddings specified :)

article{
    box-sizing: border-box;      // Added this
    border-right:solid 1px grey;
    height:50%;
    width:33.333%;               // Changed this
    float:left;
    padding:0.5%;
    text-align:center;
}

section{
    border:dotted 1px blue;
    margin-top:10px;
    margin-bottom:40px;
    overflow: hidden;
}

http://jsfiddle.net/teddyrised/yv8kvzcp/