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?