How to stack two divs vertically (and within another div) when the top div can change height?

Question

I tried using position:absolute, but when the upper div expands, it overlaps the lower div.

#twoDivWrapper
{
    position:relative;
}

#topDiv
{
}

#bottomDiv
{
    position:absolute;
    margin-top:400px;
    margin-left:20px;
}

The above CSS stacks the two divs above and below each other vertically, but when the top div gets taller, a bottom portion of it encroaches on the bottom div.

HTML:

<div id="twoDivWrapper">
    <div id="topDiv">
        <ul class="my_list">
            <li>E-mail Address</li>
            <li>Phone Number</li>
        </ul>
    </div>
    <div id="bottomDiv">
        <p>This is some stuff.</p>
    </div>
</div>

this is what absolute positionning does. why would need it here ? unless you do not set any coordonates : http://codepen.io/anon/pen/ENMZrY and even then, it is average to use. — G-Cyrillus, Dec 20 '16 at 16:42
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D, Dec 20 '16 at 16:43
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Dec 20 '16 at 16:43
If I don't use the absolute positioning, then the two divs display side by side, and slightly overlapping. I want one to be above the other, even when the top one gets taller. — user3402743, Dec 20 '16 at 16:48
You must have some other styles affecting it - this is how default divs work: https://jsfiddle.net/w7tt5ys9/. As Paulie says, you need to create a [MCVE] — Pete, Dec 20 '16 at 16:50
Well if the divs are displayed side by side then there must be some CSS for the inner divs like ``display: inline;``, ``display: inline-block;`` or ``float: left;``. Is there some other CSS? — Fabic, Dec 20 '16 at 16:51
There is some other CSS, but I didn't think it was relevant. .f { margin: 0px !important; float: left; } img#WVO { cursor: pointer; } iframe#WV { display:none; height:262px; width:460px; } #RNW { float:right; margin-top:-40px; } #RNW p { margin: 40px 0; } #WLM { background-color: #a0e02f; border-radius: 5px; border: none; color: #3b3b3b; font-size: 18px; font-family: 'Lato', sans-serif; font-weight: bold; padding: 9px 65px; box-shadow: 1px 2px 5px black; cursor: pointer; } #WLM:hover { background-color: #7baf1e; } Any of those seem like potential suspects? — user3402743, Dec 20 '16 at 16:57

score 3 · Accepted Answer · answered Dec 20 '16 at 16:52

Here's an example. In this I fixed the height of the bootom div and the upper div adjust its height to fill out the container div.

If you want upper div to have fixed height, just switch their classes.

The green one is their container, you can adjust its height to your reuirements.

*{
  box-sizing: border-box;
}
body, html, .bodyDiv{
  height: 100%;
  width: 100%;
  margin: 0;
}
.bodyDiv{
  display:flex;
  flex-direction: column;
  background-color:green;
}
#container
{
    margin: 0 auto;
    width:80%;
    background-color: white;
    border: 0.2em solid black;
    flex-shrink:0;
    flex-grow:1;
}
#footer
{
    margin: 0 auto;
    width:80%;
    text-align: center;
    height:1.5em;
    background-color: white;
    border: 0.2em solid black;
    flex-shrink:0;
}

<div class="bodyDiv">
<div id="container">
    test column 2
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
</div>
<div id="footer">
test content
</div>
</div>

score 0 · Answer 2 · answered Dec 20 '16 at 18:06

You can try this

      *{
          box-sizing: border-box;
       }
       .body
       {
              width:100%;
              min-height:100%;
              background:#fff;
       }

       #twodivwrapper
       {

              min-height:100%;
              width:80%;
              margin:0% 10% 0% 10%;
              background:#f9f9f9;
            box-shadow:1px 3px 2px 1px #888;
       }
       #topdiv
       {
          width:100%;
          min-height:50%;
          padding:20px;
          background:#eeeeee;
          box-shadow: 2px 1px 2px 1px #888;
          margin-bottom:5px;
       }
       #bottomdiv'
       {
          width:100%;
          min-height:50%;
          padding:50px;
          background:#eeeeee;
          box-shadow: 2px 1px 2px 1px #888;
       }

you can adjust height and widht according to your requirements.

and the HTML markup is:

       <div id="twodivwrapper">
        <div id="topdiv">
           <p> Blah Blah Blah</p>
        </div>
        <div id="bottomdiv">
            <p>Why don't try this</p>
        </div>
       </div>

How to stack two divs vertically (and within another div) when the top div can change height?

2 Answers2