Dave Dave - 5 months ago 9
HTML Question

How do I prevent one DIV from sitting on top of another DIV?

I’m having trouble getting one div not to lie on top of another div. I have the following

<div id="navbar">
<div id="leftNavSection"></div>
<div id="rightNavSection">Logged in as Dave <a rel="nofollow" data-method="delete" href="/logout">Log Out</a></div>
</div>


with the accompanying CSS …

#rightNavSection {
float: right;
}


However, when I add this div underneath, it lines up on the same vertical plane as the nav div.

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
</div>


Here is the JSFiddle that illustrates the problem — https://jsfiddle.net/z4rw9qj1/ . If I add a fixed height to the nav div (e.g. “height: 10px;”), then the overlay doesn’t happen, but I don’t want to add a fixed height because if someone adjusts their browser font size, or I add other elements, then the look is broken. Is there a way I can get the lower div not to trample the upper div?

Answer

That's because of float: right and you can fix that if you add overflow: hidden on header DEMO

header {
  overflow: hidden;
}