1

I have set up 3 divs, one of which has a div within a div. Neither div has content. I am only sizing them and applying a background color.

div {
  box-sizing: border-box;
  display: inline-block;
  width: 25%;
  height: 250px;
  margin: 30px auto 30px 6%;
  background-color: darkgoldenrod;
  border: 2px solid black;
}

.innerDiv {
  background-color: lightgreen;
  width: 25%;
  height: 75%;
  margin-top: 63px;
  padding: 0;
}
<div>
  <div class="innerDiv">
    hello
  </div>
</div>

<div></div>
<div></div>

I had to add a margin-top to bring it back up and even with the other divs.

Additionally, if I add any content to the inner div the whole set up is pulled even further down the page.

Why is this happening?

Daniel_Knights
  • 7,940
  • 4
  • 21
  • 49
Doug
  • 29
  • 4

1 Answers1

0

if you added a float:left to the div it will work fine ..

div {
  box-sizing: border-box;
  display: inline-block;
  width: 25%;
  height: 250px;
  margin: 30px auto 30px 6%;
  background-color: darkgoldenrod;
  border: 2px solid black;
  float:left;
}

.innerDiv {
  background-color: lightgreen;
  width: 25%;
  height: 75%;
  margin-top: 63px;
  padding: 0;
}
<div>
  <div class="innerDiv">hello</div>
</div>
      
<div></div>
<div></div>
Ahmed Mansour
  • 500
  • 4
  • 14
  • Thanks for the response. You're correct for sure the float: left puts everything back into place. My main concern was why that happens in the first place. I was trying to work through it by drawing the box model out but I could not come up with a solution. I don't want to write it off as just one of those janky css things so I'm hoping that's not what it comes down to lol. – Doug Dec 09 '20 at 19:55