CODEWITHSUNDEEP
jqueryhtmlcssgoogle-chromeinternet-explorer-8
oshirowanen
oshirowanen

Reputation: 15955

Having issues with CSS overflow:hidden

I have some script which seems to work perfectly functionality wise:

HTML:

<div class="navigation1">icon Home</div>
<div class="dropdown">
    <div class="items">icon Default 1</div>
    <div class="items">icon Reports 1</div>
    <div class="items">icon Other 1</div>
</div>

CSS:

.menu {
    margin:auto;
    /*overflow:hidden;*/
    position: relative;
    background:#CCCCCC;
}

Visually though, it all goes wrong. As you can see from this jsFiddle, the menu and the footer seem to be laid out incorrectly. When I uncomment /*overflow:hidden;*/, visually it looks perfect, but the .dropdown seems to get hidden behind the .footer.

How do i get this to look right visually and get it to function correctly too?

Upvotes: 1

Views: 93

Answers (3)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Now define your .menu:after some css properties

as like this

.menu:after {
    clear: both;
    content: "";
    display: block;
    overflow: hidden;
}

Live Demo

---------

Or 2nd option here

HTML

<br />
<div class="header">header</div>
<div class="menu">
    <div class="navigation1">icon Home</div>
    <div class="dropdown">
        <div class="items">icon Default 1</div>
        <div class="items">icon Reports 1</div>
        <div class="items">icon Other 1</div>
    </div>
    <div class="navigation2">icon Home</div>
    <div class="dropdown drop2">
        <div class="items">icon Default 2</div>
        <div class="items">icon Reports 2</div>
        <div class="items">icon Other 2</div>
    </div>
    <div class="clr"></div>  // add this line here 

</div>
<div class="footer">footer</div>

Css

.clr{
clear:both;
}

Live Demo

Upvotes: 3

Adam C
Adam C

Reputation: 3911

In terms of mark up - especially as you develop this further - your footer might not immediately follow your navigation. So put a clearfix on the navigation instead. Don't rely on the footer (or any other element) which may or may not be present in your final build to do the dirty work of clearing your floats.

EDIT: Seems that Rohit Azad and myself came up with the same answer at similar times. Follow his advice.

Upvotes: 0

Chinmayee G
Chinmayee G

Reputation: 8117

Add clear:both to footer class:

.footer
{
    background:#AAAAAA;
    clear:both;
}

It clears formatting added due to float:left or float:right to previous tags.

Upvotes: 2

Related Questions