CODEWITHSUNDEEP
htmlcss
Mike Smith
Mike Smith

Reputation: 33

Div Appears Within Div Instead Of Under

I am trying to make a div appear under another div, however it keeps displaying within the div above.

The issue is with the "Menubox" Div.

The "Menubox" continues to display inside the "header-search-box" rather than underneath.

Here is the HTML.

<header id="header-bar">
    <div id="innerheader">

        <div id="logobox">
        </div><!--End Logobox-->

        <div id="header-search-box">
            <?php get_search_form(); ?>
        </div>

        <nav id="menubox">
            <?php ?>
        </nav><!--End Menubox-->

    </div><!--End Innerheader-->
</header><!--End Header-bar-->

Here is the CSS...

#header-bar {
    background: #222;
    height: 75px;
}

#innerheader {
    width: 98%;
    margin-left: auto;
    margin-right: auto;
    height: 75px;
}

#logobox {
    float: left;
    font-size: 2em;
    font-weight: 700;
    overflow: hidden;
    width: 300px;
    position:relative;
    top:50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

#header-search-box {
    float:left;
    margin-top:20px;
}

#menubox {
    float: left;
    margin-top: 20px;
}

Any ideas would be appreciated.

Thanks

Upvotes: 2

Views: 111

Answers (2)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

It is because you have used float:left for your header-search-box and menubox. That is the reason it is coming in a side by side. Remove that and you will get the desired result.

  #header-search-box {
    /*float:left*/
    margin-top:20px;
  }

  #menubox {
    /*float:left*/ 
    margin-top: 20px;
  }

DEMO

Upvotes: 0

Sanketh. K. Jain
Sanketh. K. Jain

Reputation: 489

Insert

<div style="clear:both;"></div>

between the two tags. This acts like a divider.

Upvotes: 1

Related Questions