CODEWITHSUNDEEP
csscss-floatparent-child
Darren Haynes
Darren Haynes

Reputation: 1353

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

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;
}

Upvotes: 0

Views: 30

Answers (1)

user7250444
user7250444

Reputation:

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

Upvotes: 1

Related Questions