CODEWITHSUNDEEP
htmlcssmenucss-float
TehHO
TehHO

Reputation: 43

css causing overflow

THIS QUESTION HAS BEEN ANSWERED

I have this div which contains two unorderd lists. I'm looking to have these lists placed next to each over, not above/below eachother.

This is the best I've come up with, but the lists seem to fly out of the container when the float is added?

Why does this happen? It seems to have something to do with the float, on the UL.

A little fiddle http://jsfiddle.net/ynSdU/3/

CSS

.products_overview {width:100%; border: 3px solid #F00;opacity:0.95;height: 50px;}
.products_overview ul{list-style:none;float:left;border-left:1px solid #666;margin:20px 0px 10px 30px;padding:10px;} 
.products_overview li.ldd_heading {font-family: Georgia, serif;font-size: 13px;font-style: italic;color: #333; padding:0px 0px 10px 0px;}
.products_overview li.ldd_heading a.link {font-family: Georgia, serif;font-size: 13px;font-style: italic;color:#333;padding:5px 3px 5px 3px; }
.products_overview ul li a{font-family: Arial, serif;font-size:10px;line-height:20px;color:#333;padding:1px 3px;text-decoration:none;}
.products_overview ul li a:hover{-moz-box-shadow:0px 0px 2px #333; box-shadow:0px 0px 2px #333;background: #CCC;}

HTML

THE FOLLOWING CODE IS SURROUNDED BY A DIV WITH THE CLASS: products_overview!!!

<ul>
    <li class="ldd_heading"><a class='link'>header</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>                           
</ul>  
<ul>
    <li class="ldd_heading">header</li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>   
    <li><a href="#">3</a></li>                                  
</ul>

Upvotes: 1

Views: 81

Answers (3)

Kyle
Kyle

Reputation: 67204

You need to add a clearfix:

I used a span.clear to clear your floats.

...<li><a href="#">3</a></li>                                  
</ul>
<span class="clear">&nbsp;</span>
</div>

CSS:

span.clear
{
    clear: both;
    display: block;
}

http://jsfiddle.net/Kyle_Sevenoaks/ynSdU/7/

I prefer to use this method for ease of readability. I can just see the span.clear and know that I have cleared my floats. The other methods work just as well. :)

Upvotes: 1

zenkaty
zenkaty

Reputation: 1548

Using floats takes them out of the layout, so they no longer affect the height of the containing div.

All you need is this on your container:

.products_overview {overflow:hidden}

Upvotes: 0

Shailender Arora
Shailender Arora

Reputation: 7778

Just give overflow:hidden to your parent div

Actually when you use float in your child elements so you should clear those floats so you didn't do that so i am clearing by defining the overflow:hidden to your parent div float elements will be clear.

CSS

.products_overview {width:100%; border: 3px solid #F00;opacity:0.95; overflow:hidden;}

http://jsfiddle.net/ynSdU/4/

Upvotes: 2

Related Questions