Hello there, I've been following along with this tutorial on CSS Positioning to enhance my understanding: . Everything was going smoothly until I reached step 7 and ran into a roadblock. In that step, the text "id = div-1" is supposed to be positioned above "div-1a" which is floated left.
Upon checking out my CodePen version here: http://codepen.io/DarrenHaynes/pen/gLoYpp/, you'll notice that the text "id = div-1" aligns to the right of "div-1a". This is not the desired outcome since "div-1" is the parent of "div-1a". So I'm stuck trying to replicate the tutorial successfully in my CodePen.
Here's the code snippet from my 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;
}