Question

I have two <div> and I have difficulty ordering them.
Please teach me and help me.

<div class="menubar">
    <ul class="menu">
        <li class="itmes"></li>
        <li class="itmes"></li>
        <li class="itmes"></li>
    </ul>
</div>
<div class="b_header">

</div>

This is the related CSS.

.menubar{
width: 110%;
background-color: #000000;
margin-top: 32px;
height: 35px;
display: block;
position: absolute;
margin-left: -20px;
vertical-align: middle;
text-align: center;}

.b_header{
width: 110%;
background: url('./img/b_header.gif');
margin-left: -20px;
height: 15px;
position: inherit;
margin-top: 0px;}

I want and expect to see <div class="b_header"> below the <div class="b_header"> but it isn’t.

What is the solution?

Answer 1

Remove

position:absolute;

and it will work. Absolute positioning will remove the menu from the flow of the page so the header div below it will effectively pretend like the menu is not there.

Alternatively (if you need position:absolute) you can force your header below the menu by giving the header a margin-top:67px;