Floating nav links right in header

[Big D]

Hello.

I'm trying to position a couple of navigation links in the very top right hand corner of my header, but so far without success. The header is comprised of a left-hand div for the site name and a right-hand div for the site's sub-title, both floated left, and I've added a third div (toplinks) for the nav links, which I've floated right. Here is the css I am using for my header:

/* Header styles */
 
#header {
 display:block;
 clear:both;
 margin:0;
 padding:0;
 width:100%;
 overflow:hidden;  
background:#006600;
 }
#header .border {
 background-image:url(border.jpg);
 background-repeat:repeat-x;
 width:100%;
 height:30px;
 display:block;
 clear:both;
 }
#headleft {
 margin:0;
 padding:0;
 float:left;
 width:25%;
 background:#000000;
 color:#ffffff;
 }
#headright {
 margin:0;
 padding:0;
 float:left;
 width:75%;
 }
#toplinks {
 margin:0;
 float:right;
 display:inline;
 }  
h1.headerright {
 color:#ffffff; 
 font-size:175%;
 text-align:left;
 font-family:garamond;
 margin:1.5em 0 1.5em 1em;
 }
h1.headerleft {
 color:#ffffff; 
 font-size:175%;
 text-align:right;
 font-family:garamond;
 margin:1.5em 1em 1.5em 0;
 }

And here is the html:

<div id="header">
<div id="headleft"><h1 class="headerleft">PAGE TITLE</h1></div>
<div id="headright"><h1 class="headerright">PAGE SUB-TITLE</h1></div>
<div id="toplinks"><p><a href="">navlink1</a> | <a href="">navlink2</a></p></div>
<div class="border"></div>
</div>

I have been fiddling around trying to figure out what I am missing/doing wrong, so would be much obliged if someone out there has an answer.

 

[php.allstar]

Hi,

Try this, it works for me...

#headright {
 margin:0;
 padding:0;
 float:left;
 [COLOR=#ff0000][B]width:50%;[/B][/COLOR]
 }
#toplinks {
 margin:0;
 float:right;
 display:inline;
[B][COLOR=#ff0000] width: 25%;
 text-align: right;[/COLOR][/B]
 }

 

[Big D]

Thank you for the reply - that works fine.