Having Issues With Css Overflow:hidden

Question

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

icon Home

Copy

---------

Or 2nd option here

HTML

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

</div><divclass="footer">footer</div>

Css

.clr{
clear:both;
}

Live Demo

Solution 2:

Add clear:both to footer class:

Baca Juga

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

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

Solution 3:

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.

Html5 Guru

Having Issues With Css Overflow:hidden

Post a Comment for "Having Issues With Css Overflow:hidden"