H. Ferrence H. Ferrence - 1 month ago 4
CSS Question

How to position a div under another div wrapped in a different container

Is it possible to position

div#d2
directly under the
div#d1
container per markup below instead of positioning outside the height of the wrapper?



#wrapper {
height: 100%;
display: flex;
background-color: steelblue;
align-items: center;
min-height: 100%;
/* fallback style for browsers that do not support the `vh` unit */
min-height: 100vh;
}
#d2 {
margin-top: 0.25rem;
text-align: center;
background-color:#336712;
}

<body>
<div id="wrapper">
<div id="d1">lorem ipsum</div>
</div> <!-- #wrapper -->
<div id="d2">This should appear .25rem's under #d1 container</div>
</body>





Here's a pic of what I am trying to achieve:
enter image description here

Answer

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: steelblue;
}
#wrapper {
  display: flex;
}
#d2 {
  margin-top: 0.25rem;
  text-align: center;
  background-color: #336712;
}
<div id="wrapper">
  <div id="d1">lorem ipsum</div>
</div>
<!-- #wrapper -->
<div id="d2">This should appear .25rem's under #d1 container</div>

jsFiddle demo