CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Georgi Georgiev
Georgi Georgiev

Reputation: 1623

Bootstrap div below div

I have a div containing 3 cells, and I want to place another div below it. But for some reason it appears above the wrapper div. I tried some things I found on stackoverflow, but it doesn't seem to work. Here is one of the solutions which was supposed to work:

HTML:

<div class="col-sm-5 col-sm-offset-3" id="wrapper">
    <div class="row">
       <div class="col-sm-1 col-sm-offset-2" id="col1"> col1 </div>
       <div class="col-sm-1 col-sm-offset-2 " id="col2"> col2 </div>
       <div class="col-sm-1 col-sm-offset-2" id="col3"> col3 </div>
   </div>
</div>

<div id="below">
This should be below the wrapper div
</div>

CSS:

#col1{
    background-color: lime;
    border: solid 1px;
    text-align: center;
}
#col2{

    background-color:  aqua;
    border: solid 1px;
    text-align: center;
}
#col3{
    background-color:  lightpink;
    border: solid 1px;
    text-align: center;
}
#wrapper{
    border: solid 1px;
    height: 100%;
    top: 100px;


}
#below{
    border: solid 2px;
    text-align: center;
    min-height: 100%;
    min-width: 100%;   
    clear: both;

}

Upvotes: 0

Views: 1191

Answers (1)

Johan Karlsson
Johan Karlsson

Reputation: 6476

The reason being is you are using top: 100px on your wrapper element.

top on MDN:

... for relatively positioned elements, the offset that the element is moved below its position in the normal flow if it wasn't positioned.

This means that when you move the #wrapper-element with top the #below-element stay in the same place as if you hadn't used top.

To fix the issue you can use margin-top: 100px instead, which won't change the normal flow of #wrapper.

Upvotes: 1

Related Questions