2 replies [Last post]
dzuy
Offline
newbie
Last seen: 14 years 51 weeks ago
Joined: 2007-02-05
Posts: 2
Points: 0

hello all,

pretty new to this game, but looks like this forum contains some pretty ace stuff.

about ul, when coding the CSS for a ul and li, if i was making a horizontal list using floats, and i defined "float:left" in the li class, and did NOT do the same for the ul i notice that some funky things happen. if i define a background color of green for the ul then if i do not include "float:left" then the background is gone and the list items seems to be outside the ul section.

#nav ul{
background:green;}

#nav li{
float:left;}

it seems that the position must be defined in both the ul and li sections in the css.

can anyone tell me why? why is not enough to just define the li to float left and have it be contained inside the ul.

thanks!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

When you float things

When you float things they're taken out of the flow of the document which means their container doesn't have an awareness that they're there. So in your case, the ul ends where it starts because all the content is floated. Floating containers and setting their width is one way to get containers to expand to contain floats. Other solutions are to add overflow: hidden to the ul or to give it a height.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

dzuy
Offline
newbie
Last seen: 14 years 51 weeks ago
Joined: 2007-02-05
Posts: 2
Points: 0

ah yes, what a lovely

ah yes,

what a lovely answer, makes perfect sense.

thanks!