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

Question

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:

`#d2` flows and appears outside container `#wrapper`. I want to re-position it 0.25rem's directly under `#d1` which is inside the wrapper (i.e., non-parent div). — H. Ferrence, Oct 29 '15 at 18:00
What is the parent container to the block of code in your question? — Michael Benjamin, Oct 29 '15 at 18:09
And as an aside, if any clever CSS experts out there know how to prevent the username and password boxes from pre-populating -- you'll truly be a CSS Star! (sse my http://stackoverflow.com/questions/33367497/how-to-prevent-form-elements-from-pre-populating-in-bootstrap) — H. Ferrence, Oct 29 '15 at 18:38

Michael Benjamin · Accepted Answer · 2016-11-03T16:00:26.643

2

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

edited Nov 03 '16 at 16:00

answered Oct 29 '15 at 18:40

Michael Benjamin

346,931
104
581
701

Brilliant !! Looks perfect @Michael_B. Let me integrate into my app and I'll post back. Thanks ! – H. Ferrence Oct 29 '15 at 18:42
1

While I am doing this can you shed your CSS stardom on my most recent comment under my OQ about pre-populated fields? Thanks... – H. Ferrence Oct 29 '15 at 18:45

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

1 Answers1

jsFiddle demo