Aligning divs small issue

[Benji6996]

Good Evening friends,

I have a little problem here with aligning three divs in a row at the top of a page. I would like one to display in the top left corner, one in the top right and one in the center. I obviously cannot do this with margins because I want the center one to always be in the center of the page.

So my solution was to float the left one on the left and float the right one on the right. The center div has a margin of auto so aligns to the center of the page. My CSS is perfect in every browser other than IE7. I do not offer support for IE6- so I am not bothered about that but it is quite important for me to get it working in IE7.

At the moment in IE7 all the elements are in the right place but the right side one sits below where it is meant to be.

If I assign 'display:inline' to the center div then this works but the center div then does not center on the screen!

Any solutions??

Here is a my HTML code in stripped form:

      <div id="header">
            	<div id="hd_logo"><a><!-- TEXT --></a></div>
                <span id="hd_wc"><!-- TEXT --></span>
                <ul id="headernav">
                	<li class="md_btn" id="hd_today"><a href="#"><!-- Today --></a></li>
                	<li id="mon"><a href="#"><!-- Monday --></a></li>
                	<li id="tue"><a href="#"><!-- Tuesday --></a></li>
                	<li id="wed"><a href="#"><!-- Wednesday --></a></li>
                	<li id="thu"><a href="#"><!-- Thursday --></a></li>
                	<li id="fri"><a href="#"><!-- Friday --></a></li>
                	<li id="sat"><a href="#"><!-- Saturday --></a></li>
                	<li id="sun"><a href="#"><!-- Sunday --></a></li>
                </ul>
                <div class="md_btn" id="hd_calendar"><!-- Calendar --></div>
        </div>

and my CSS in stripped form:

UL {
	list-style-type: none;	
	padding: 0;
	margin: 0;	
}

LI {
	margin: 0;
	padding: 0;	
}

#header {display: block; text-align: center; height: 50px; width: 100%; min-width: 1081px; margin: 0; padding: 0; background: #2A6692 url(../images/body/sprite.png) repeat-x 0 -72px;}
#header #headernav {display: inline-block; text-align: center; height: 24px; width: 727px; margin: 13px auto; padding: 0;}
#header #hd_logo {display: block; float: left; width: 84px; height: 37px; margin: 6px 0 0 15px;}
#header #hd_wc {display: block; float: left; margin: 6px 20px 0 20px; height: 37px; line-height: 37px; font-size: 16px; color: #fff; text-shadow: #333 2px 2px 2px;}
#header #hd_calendar {background: url(../images/body/sprite.png) no-repeat 0px -207px; float: right; margin: 13px 15px 0 0; cursor: pointer;}

Thanks in Advance,

Ben

[holyhttp]

One quick solution would be to set an absolute position for the all other elements in the header except the one you want centered.

To keep your CSS compact, you don't need contextual selectors when using ID because each ID should be unique in a given web page. So instead of
#header #headernav { ... }
just have
#headernav {.... }

[Benji6996]

Good idea, that didn't cross my mind, will give it a go.

I appreciate the advice on the CSS format, I only format it in that way because it makes my code look neat and clean because everything lines up in columns if you understand what I mean. However I do see that continued use of this method will of course be using up unnecessary space so will adapt it to ensure it doesn't.

Thank you.