CSS Issue

[Twinkie]

There is a small issue with my css menu. After making it, the div container will not center it. I am sure this is a float issue, as I suck with floating elements. Please help me out.

CSS: http://pastebin.com/m72ce0190
HTML: http://pastebin.com/m68404204
Screen: http://i50.tinypic.com/ra9ta8.jpg

 

[misson]

Your intuition is correct, the floats are preventing centering. You've a few different options. One is to set the display of the menu items to inline-block, but this won't work on IE 6 & 7, nor on FF 2 and older. Another option is to set their display to inline and specify a line-height. ~2.4em should roughly work with your current layout, but might be slightly off in some browsers. You can also set line-height on #menu ul or #menu instead of #menu li.

 

[Twinkie]

Thank you for your prompt response

I am sure you have noticed that most of my CSS problems are floating issues. Please help me understand the problem so next time I can solve it on my own. When I float elements, they often "pop" out of containers. They don't adhere to the other CSS rules I place, and behave independently, as if it was not contained at all. This can be observed by taking the code in my first post and playing with it a bit. Put non-floating elements before and after the floating menus and notice where the background color follows. Why does the floating elements not behave like the other elements in the same container?

The display inline did not work, although I know that is the right way to do it. Posted it on my web, whats wrong?

*I too detest the new banner -_-*

 

[misson]

I am sure you have noticed that most of my CSS problems are floating issues. Please help me understand the problem so next time I can solve it on my own.

Floats are tricksy beasts, since they exist outside the normal flow (see also "CSS Positioning" on Brainjar, among others), somewhat like absolutely positioned elements. The best description of floats is § 9.5 of the CSS 2.1 standard, since it's normative (that is, it describes the standards compliant behavior). The Brainjar article linked above has a good description of floats on the second page. Smashing Magazine's article "CSS Float Theory: Things You Should Know" extracts relevant sections of the standard, along with bits and pieces from other sources.

When I float elements, they often "pop" out of containers. They don't adhere to the other CSS rules I place, and behave independently, as if it was not contained at all.

According to the standards, they aren't. Read "Simple clearing of floats" for an overview of the techniques created over the years, as well as details for the most recent.

 

[Twinkie]

Thank you, I will read those articles. For the time being, what about the "display: inline;" declaration? It did not help to center the menu?

 

[misson]

The problem is the <li> are still floated. Remove the floating and they'll center. You'll also need to set vertical padding on the <ul> to match the vertical border width and padding on the <li> so that the <ul> will contain the inline <li>.