Floating nav links right in header

Discussion in 'Coding Help' started by Big D, Mar 13, 2012.

Tags:
  1. Big D

    Big D New Member

    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:


    Code:
    /* 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:

    Code:
    <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.
     
  2. php.allstar

    php.allstar New Member

    Hi,

    Try this, it works for me...

    Code:
    #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]
     } 
    
     
  3. Big D

    Big D New Member

    Thank you for the reply - that works fine.
     

Share This Page