Can't get nested div to stack

Question

I'm trying to replicate a snack bar box in css to practice some things I've learned in a tutorial. I have two div items inside another div ("10" and "bars") that I'm trying to get to stack. But they just sit next to each other.

Here is my code:

/*Color Palette
lara green: 769A30;
Lara red: E63A3E;
Lara tan: F0CD92;
Lara brown: 612D22;
*/

/*GLOBAL STYLE
------------------------------*/
body {
  background: #769A30;

}

@font-face {
  font-family: 'Akzidenz';
  src: url('Akzidenz Grotesk Black.ttf') format('truetype');
}

h1, h2 {
  color: #F0CD92;
  font-family: 'Akzidenz';
}



/*HEADER
------------------------------*/
.headerSection {
  text-align: center;
  background: #612D22;
  margin: 0px;
  padding: 0px;
  height: 100px;

}

.headerDiv {
  display: inline-block;
  text-align: center;
  background: red;
  height: 100px;
  width: 100px;
  line-height: 100px;



}

#middleDiv {
  display: inline-block;
}

.middleSubDiv {
  text-align: center;
  display: inline-block;
  background: #E63A3E;
  height: 50px;
  width: 100px;
  line-height: 50px;


}

.topH1 {
  margin: 0px;
  padding: 0px;

}

.topH2 {
  margin: 0px;
  padding: 0px;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Larabar | Apple Pie</title>
  <link rel="stylesheet" href="css/styles.css">

</head>

<body>
  <div class="headerSection"><!--
--><div class="headerDiv"><!--
---><h1 class="topH1">value<h1><!--
--></div><!--
--><div id="middleDiv"><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">10<h2><!--
---></div><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">bars<h2><!--
---></div><!--
--></div><!--
--><div class="headerDiv"><!--
--><h1 class="topH1">pack<h1><!--
--></div><!--
--></div>

  <footer>
  </footer>


</body>

</html>

If I remove "display: inline-block;" from the middleSubDiv class (the two divs that are supposed to stack) they DO stack correctly, but then the divs right next to them are pushed down. Can someone help me understand why this is? Here is a picture of what I'm talking about

Thank you, any help is greatly appreciated!

you are providing `display:block` inside `display: inline-block` container, which disturbs the flow. Refer : https://stackoverflow.com/questions/1371307/displayblock-inside-displayinline So, to achieve this use `display: flex` to obtain your desired layout. — Abhishek Kumar, Aug 28 '18 at 11:34

score 0 · Accepted Answer · answered Aug 28 '18 at 11:34

Remove the display: inline-block; from the .middleSubDiv and add vertical-align: bottom; to the .headerDiv.

/*Color Palette
lara green: 769A30;
Lara red: E63A3E;
Lara tan: F0CD92;
Lara brown: 612D22;
*/

/*GLOBAL STYLE
------------------------------*/
body {
  background: #769A30;

}

@font-face {
  font-family: 'Akzidenz';
  src: url('Akzidenz Grotesk Black.ttf') format('truetype');
}

h1, h2 {
  color: #F0CD92;
  font-family: 'Akzidenz';
}



/*HEADER
------------------------------*/
.headerSection {
  text-align: center;
  background: #612D22;
  margin: 0px;
  padding: 0px;
  height: 100px;

}

.headerDiv {
  display: inline-block;
  text-align: center;
  background: red;
  height: 100px;
  width: 100px;
  line-height: 100px;
  vertical-align: bottom;


}

#middleDiv {
  display: inline-block;
}

.middleSubDiv {
  text-align: center;
/*      display: inline-block;*/
  background: #E63A3E;
  height: 50px;
  width: 100px;
  line-height: 50px;


}

.topH1 {
  margin: 0px;
  padding: 0px;

}

.topH2 {
  margin: 0px;
  padding: 0px;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Larabar | Apple Pie</title>
  <link rel="stylesheet" href="css/styles.css">

</head>

<body>
  <div class="headerSection"><!--
--><div class="headerDiv"><!--
---><h1 class="topH1">value<h1><!--
--></div><!--
--><div id="middleDiv"><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">10<h2><!--
---></div><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">bars<h2><!--
---></div><!--
--></div><!--
--><div class="headerDiv"><!--
--><h1 class="topH1">pack<h1><!--
--></div><!--
--></div>

  <footer>
  </footer>


</body>

</html>

That worked perfectly. I guess I need to read up more on vertical align. Thank you, sir! — baconman, Aug 28 '18 at 12:07

Can't get nested div to stack

1 Answers1