Odd CSS Vacuum

[flash3d8]

I was hired to do some additions to a web site, including code a CSS menu. They had a page with a preset structure and CSS styles already defined (I am aware of the issues with coding style), so I integrated my changes in the least intrusive way possible. The issue is that the 'Contact Us' header is supposed to be aligned left. In Firebug, there are no styles that tell it to be aligned right, and explicitly setting text-align: left; float: none; doesn't help. If I delete the header, the next sibling element gets sucked into the 'vacuum' and is pushed right.

The issue seems to be the way that I centered the floating menu. The offending css style is the last style below:

body.header2 header div#header_bottom ul {
	list-style-type: none;
	padding: 0;
	text-align: center;
	font-size: 0;
	position: relative;
	left: 50%;
	float: left;
}

The whole menu is completely contained so I don't see any reason why it would be affecting the content below it. I didn't see any unclosed HTML tags. Any ideas?

Also, on a side note, there was some issue in Chrome / Opera that causes the font to be rendered wider than other browsers and that threw the menu off. I responded by making the menu dynamically centered and the logo positioned relative to the menu to it can compensate for the extra width. Is there a better way to do what I did?

~Jacob

[flash3d8]

I fixed it by putting a div clear fix inside. I tried that before-hand, and the content was pushed down when I did. I figured out that was margins on the ul, and setting margin: 0; fixed it. Firebug didn't show the content escaping the conatiner like it usually does when a clear fix is needed? Can someone explain what happened, and hopefully show me a better way to do this?

~Jacob

[Paul O'B]

Hi,

Your header was floated so any content that follows the header will try and wrap assuming that there is room. You should have just needed to clear the elements following the header.

As it is the method you are using to centre the header is giving you a large horizontal scrollbar on the viewport which is undesirable. A better method is to use display:inline-block and do this:

body.header2 header div#header_bottom ul {
	float:none;
	left:0;
	display:inline-block;
}
* html body.header2 header div#header_bottom ul { display:inline }/* ie6 fix*/
*+html body.header2 header div#header_bottom ul { display:inline }/* ie7 fix*/
body.header2 header div#header_bottom ul li { right:0 }

Those pathnames are overkill as ids are unique so you don't need to qualify them with all those elements