Float div left - Text of Parent element wrapping this div also? - css

Question

Aloha - I have been recreating this tutorial - [CSS Positioning][1] -
[1]: http://www.barelyfitz.com/screencast/html-training/css/positioning/ to really understand the tutorial. It's at step 7 in the tutorial that I have bumped into something that I can't figure out. In step 7 of the tutorial you will see that the text "id = div-1" sits above the "div-1a" which is floated left.
If you take a look at my code pen - http://codepen.io/DarrenHaynes/pen/gLoYpp/ - You will see that the text "id = div-1" is aligning to the right of the "div-1a". I am not expecting this since "div-1" is the parent of "div-1a". Thus I can't figure out how to get my codepen to replicate the tutorial.
My code on codepen:
HTML:
<div id="div-before">
id = div-before
</div>
<div id="div-1">
id = div-1
<div id="div-1a">
id = div-1a
<br>
<br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
</div>
<div id="div-1b">
id = div-1b<br><br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan
augue ipsum id lorem.
</div>
<div id=div-1c>
id = div-1c
</div>
</div>
<div id="div-after">
id = div-after
</div>
CSS:
#div-before,
#div-after {
margin: 0 auto;
width: 400px;
font-size: 20px;
background-color: #8888DD;
padding: 2px 5px;
}
#div-1 {
position: relative;
margin: 0 auto;
width: 400px;
color: white;
padding: 20px 10px 10px 10px;
background-color: black;
}
#div-1a {
float: left;
width: 200px;
padding: 3px;
background-color: red;
}
#div-1b {
padding: 3px;
background-color: green;
}
#div-1c {
padding: 3px;
background-color: #33D;
}

Answer 1

You can wrap your heading for "div-1" around a 'p' tag:
<div id="div-before">
id = div-before
</div>
<div id="div-1">
<p>id = div-1</p>
<div id="div-1a">
id = div-1a
<br>
<br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
</div>
<div id="div-1b">
id = div-1b<br><br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan
augue ipsum id lorem.
</div>
<div id=div-1c>
id = div-1c
</div>
</div>
<div id="div-after">
id = div-after
</div>
CSS:
#div-before,
#div-after {
margin: 0 auto;
width: 400px;
font-size: 20px;
background-color: #8888DD;
padding: 2px 5px;
}
#div-1 {
position: relative;
margin: 0 auto;
width: 400px;
color: white;
padding: 20px 10px 10px 10px;
background-color: black;
}
#div-1a {
float: left;
width: 200px;
padding: 3px;
background-color: red;
}
#div-1b {
padding: 3px;
background-color: green;
}
#div-1c {
padding: 3px;
background-color: #33D;
}
Here's the Codepen: http://codepen.io/anon/pen/xRJNdZ