Elements not clearing each other.

Now the problem is, in IE 7 the logo image and the wordpress navigation is overlapping. You can see this here. If anyone can give some input on how to fix this, I would be very appreciative. Here is the HTML

<div id="header-wrap">  

<div id="logo"><a href="" title="" rel="home"><img src="wp-content/themes/Church/images/logo.png" /></a></div><!-- end #logo -->

<div id="navigation">
<?php wp_nav_menu( array( 'container_class' => 'menu', 'theme_location' => 'primary' ) ); ?>
</div><!-- end #navigation -->
            
<div class="clear"></div>
        
</div><!-- end #header-wrap -->

HTML:

With the following CSS

#header-wrap {}

	#logo { width: 255px; height: 70px; position: relative; left: 50px;}
	
	#navigation {  float: left; position: relative; top: 10px; right: 0; }
		#navigation .menu { display: block; text-align: center; }
		#navigation .menu li { float: left; padding: 5px 5px; list-style: none; }
		#navigation .menu li a { font-size: 18px; color: #006666; text-decoration: none; margin: 0 10px; }
		#navigation .menu li a:hover { color: #fff; }

Code (markup):

Now the problem is

 

in layout.css :-
find :-
#navigation {
float: right;
position: relative;
top: 10px; right: 60px;
}

and replace with :-

#navigation {
float: right;
position: absolute;
top: 45px;
right: 60px;
}

 

Assuming you need the navigation underneath the Logo. You don't need to float the block "logo" and block "navigation"; just remove floats.

by default, as div is block so elements comes after div append in next line.

As, member "manishsankari" mentioned to change position: absolute. It's not at all necessary. And just don't use absolute positioning without knowing the consequence. Use when it is required.

In your case, you don't even need relative positioning, without positioning you can have the mark up well on a browser.