Having issues with CSS overflow:hidden

Question

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?

what do you want to achieve with the fiddle? still not getting the motto. — Jai
– Jai, Commented Nov 26, 2012 at 10:59

Rohit Azad Malik · Accepted Answer · 2012-11-26 11:03:51Z

3

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

edited Nov 26, 2012 at 11:03

answered Nov 26, 2012 at 10:58

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chinmayee G · Accepted Answer · 2012-11-26 10:53:50Z

2

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.

answered Nov 26, 2012 at 10:53

Chinmayee G

8,1172 gold badges34 silver badges41 bronze badges

2 Comments

oshirowanen Over a year ago

Just tried this, but the .menu seems to lose it's background color. jsfiddle.net/oshirowanen/MTESY/9

Chinmayee G Over a year ago

Although not sure whether this will be ideal solution but adding float:left and width:100% to .menu solves problem. Check at jsfiddle.net/MTESY/8

Adam C · Accepted Answer · 2012-11-26 10:58:51Z

0

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.

answered Nov 26, 2012 at 10:58

Adam C

3,9212 gold badges24 silver badges19 bronze badges

Collectives™ on Stack Overflow

Having issues with CSS overflow:hidden

3 Answers 3

---------

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

---------

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related