Search code examples
csslayouthtml

Force Div below another and prevent overlap

I have two Div elements. The first should be 100% height and width of the screen. I would like the second Div to be 100% width but variable height depending on the contents and to start inline (below the first). So the full screen is Div 1 and you have to scroll down to see Div 2. But everything I have tried they overlap.

<div style="background-color:red;height:100%;width:100%;left:0px;top:0px"></div>
<br/>
<div style="width:100%;position:relative;background-color:yellow">
      <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>..
</div>

​ http://jsfiddle.net/FBJ8h/

Solution

  • Becasue

    position:absolute

    makes the div non-occupy, which means other elements don't "see" them when aligning and positioning.

    Use this:

    html,body {
    height:100%;
}
div.div2 {
    top:100%;
}

    JSFiddle