0

Here I'm working with floats and, trying to give some margin-top:100px to paragraph within div. But border collapses, how to give margin to paragraph?

.float_container {
  height: auto;
  width: 600px;
  padding: 10px;
  background: #ccc;
  margin: 50px auto;
}

.float_container:after {
  content: "";
  display: block;
  clear: left;
}

.child {
  width: 150px;
  height: 100px;
  font-size: 30px;
  float: left;
  margin-left: 30px;
}

.child:nth-child(1) {
  background-color: maroon;
}

.child:nth-child(2) {
  background-color: white;
}

.child:nth-child(3) {
  background-color: red;
}

.story,
p {
  clear: both;
}

p {
  margin-top: 100px;
  //margin is not working
}
<div class="float_container">
  <div class="child "></div>
  <div class="child "></div>
  <div class="child "></div>

  <div class="sotry">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>

</div>
Pete
  • 57,112
  • 28
  • 117
  • 166
Gaurav Kumar
  • 11
  • 1

2 Answers2

2

You either need to move story (and spell it right) out of the float container

.float_container {
  height: auto;
  width: 600px;
  padding: 10px;
  background: #ccc;
  margin: 50px auto;
}

.float_container:after {
  content: "";
  display: block;
  clear: left;
}

.child {
  width: 150px;
  height: 100px;
  font-size: 30px;
  float: left;
  margin-left: 30px;
}

.child:nth-child(1) {
  background-color: maroon;
}

.child:nth-child(2) {
  background-color: white;
}

.child:nth-child(3) {
  background-color: red;
}

.story,
p {
  clear: both;
}

p {
  margin-top: 100px;
}
<div class="float_container">
  <div class="child "></div>
  <div class="child "></div>
  <div class="child "></div>
</div>
<div class="story">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

Use padding instead of margin:

.float_container {
  height: auto;
  width: 600px;
  padding: 10px;
  background: #ccc;
  margin: 50px auto;
}

.float_container:after {
  content: "";
  display: block;
  clear: left;
}

.child {
  width: 150px;
  height: 100px;
  font-size: 30px;
  float: left;
  margin-left: 30px;
}

.child:nth-child(1) {
  background-color: maroon;
}

.child:nth-child(2) {
  background-color: white;
}

.child:nth-child(3) {
  background-color: red;
}

.story,
p {
  clear: both;
}

p {
  padding-top: 100px;
}
<div class="float_container">
  <div class="child "></div>
  <div class="child "></div>
  <div class="child "></div>
<div class="story">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>

Or put a before pseudo element in story so the p has something to margin against:

.float_container {
  height: auto;
  width: 600px;
  padding: 10px;
  background: #ccc;
  margin: 50px auto;
}

.float_container:after {
  content: "";
  display: block;
  clear: left;
}

.child {
  width: 150px;
  height: 100px;
  font-size: 30px;
  float: left;
  margin-left: 30px;
}

.child:nth-child(1) {
  background-color: maroon;
}

.child:nth-child(2) {
  background-color: white;
}

.child:nth-child(3) {
  background-color: red;
}

.story {
  clear: both;
}

.story:before {
  content: '';
  height: 0;
  display: block;
  overflow: hidden;
}

p {
  padding-top: 100px;
}
<div class="float_container">
  <div class="child "></div>
  <div class="child "></div>
  <div class="child "></div>
  <div class="story">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</div>
Pete
  • 57,112
  • 28
  • 117
  • 166
0

The margin-top of the pragraph tag does not relates to the parent element. margin-top ever relates to the element on top of the element. The float elements goes out and margin-top issnt height enough to reach the element before the float containers. Use padding-top instead.

Enchanter
  • 7
  • 9