CODEWITHSUNDEEP
csshtmluser-interface
Blob
Blob

Reputation: 541

Background colour wont appear behind list items

For some reason my list items are not sitting within my UL element which is disturbing the flow of the page, and doesn't look right. I have tried every position element under the sun but nothing works. I wondered is it because I'm styling a different div instead of the UL element?

Please see example here

The red border is suppose to hold the list elements and if one list description becomes longer, then the red background should grow as well.

Thanks

Upvotes: 0

Views: 97

Answers (4)

w3uiguru
w3uiguru

Reputation: 5895

Try this one 

ol, ul
{
  overflow:auto;
}

See the updated fiddle: http://jsfiddle.net/Uc5cr/8/

Upvotes: 0

Abhidev
Abhidev

Reputation: 7273

give overflow:hidden to the div erd background in order to contain the ul element Check this out http://jsfiddle.net/Uc5cr/7/

Upvotes: 0

mikaelb
mikaelb

Reputation: 2148

What's happening is that the LI elements are floating, and therefor going over the UL outlines. You'd typically solve this by clearing your LI elements with a element using clear: left; property in CSS, when you want to clear the floating.

But since this is in an un-ordered list, it is probably best to use a CSS hack called "clearfix" on your UL-element to solve this. That way the UL element will follow the LI elements in height.

Example: http://jsfiddle.net/mikaelbr/JkGRj/

Note: There are many versions of the clearfix hack. Do a google search to find some, if you are interessted in seeing how they work.

Upvotes: 0

sandeep
sandeep

Reputation: 92803

Your LI have float in it so you have to clear his parent which is UL. Write like this:

ul{
 overflow:hidden;
}

Check this http://jsfiddle.net/Uc5cr/1/

Upvotes: 1

Related Questions