Float stopping links working

[derekjackson]

Hi, got a weird problem I can't get my head round. I'm trying to learn some responsive design CSS and HTML, having created fixed sized sites until now.

I'm placing a logo top right, and a UL main menu below left.

For some reason, when I place the logo to the right using float:right in my CSS, the hyperlinks attached to the logo and menu stop showing as links. Float:left has the same problem. If I remove float entirely, it all works fine!

My HTML is

<div class="block_head">
	<div id="logo"><a href="index.php" target="_self"><img src="images/logo.gif" alt="LSI Architects" /></a></div>
		
	<ul class="main_menu">
		<li><a href="projmenu.php">PROJECTS</a></li>
		<li><a href="pracmenu.php">PRACTICE</a></li>
		<li><a href="commmenu.php">COMMUNITY</a></li>
		<li><a href="contact.php">CONTACT</a></li>
	</ul>
</div>

My CSS is

.block_head {
	text-align: left;
	display: block;
	margin: 2em 1em;
	background: #0f0;
        z-index: 1;
}

#logo {
	background: #ff0;
	position: static;
	/*float: left; The problem! */
	padding: 1em 0em;
	z-index: 7;
}

.block_head ul {
	display: block;
	clear: both;
	font-size: 1.5em;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style-type: none;
	background: #f00;
}

.block_head li { display: inline; }

.block_head li a {
	float: left;
	padding: 0.5em 2em 0.5em 0em;
	color: #888;
	font-family: Verdana;
	background: #00f;
}

All references talk about z-index but this doesn't seem to change things either...

[wmwong]

Here's a jsFiddle. I don't get what's wrong. The links seem to work.
http://jsfiddle.net/DYhXY/


Can you clarify what's happening on your end?

By the way, 2 things:
1. You don't need "position: static" as that's the default.
2. "z-index" only works on things positioned with "absolute" or "relative".