Inner div go outside its outer the main div

Question

There are three div inside my main div. But one div is going outside of main div. I dont get it, how can something like this ever happen?

If there is anyone who could help me..... ...I would be so grateful =)

.test1{
  width: 1000px;
  height: 200px;
  background-color: yellow;
  margin:auto;
 }
 
 .test6{
  width: 700px;
  height: 100px;
  background-color: black;
  float: left;
 }
  .test7{
  width: 700px;
  height: 100px;
  background-color: pink;
  float: left;
 }
  .test8{
  width: 300px;
  height: 200px;
  background-color: green;
  float: left;
 }

<div class="test1">
  <div class="test6">
  </div>
  <div class="test7">
  </div>
  <div class="test8">
  </div> 
 </div>

Got the solution: changed `
` element to `overflow: auto;` instead of `float:left;` — Karan, Jun 03 '18 at 14:23

score 0 · Answer 1 · answered Jun 03 '18 at 14:19

You have to change the order of your <div class="test8"> element and change it to float:right instead of float:left. Try this code.

<div class="test1">
  <div class="test8">
  </div>
  <div class="test6">
  </div>
  <div class="test7">
  </div>
</div>

.test1 {
  width: 1000px;
  height: 200px;
  background-color: yellow;
  margin: auto;
}

.test6 {
  width: 700px;
  height: 100px;
  background-color: black;
  float: left;
}

.test7 {
  width: 700px;
  height: 100px;
  background-color: pink;
  float: left;
}

.test8 {
  width: 300px;
  height: 200px;
  background-color: green;
  float: right;
}

Inner div go outside its outer the main div

1 Answers1