dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Float Left and Right in Nav - Extra Line

  1. #1
    Join Date
    Nov 2010
    Posts
    2

    Float Left and Right in Nav - Extra Line

    I'm having an awful time with an extra new line in my navigation bar. I want to have three links on the left then two on the right. But, I can't stop the links on the right from going down a line. Here is what i have:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Mockup</title>
    <style>
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    	background: transparent;
    }
    
    div#header
    {
       background-color:     #0000FF;
       padding:             20px 20px 20px 20px;
       width:               600px;
    }
    ul#topNav li
    {
       list-style-type: none;
       display:         inline;
    }
    ul#topNav li a
    {
       color:           #FFFFFF;
       display:         inline;
       border-style:    solid;
       border-width:    1px;
       padding:         10px 10px 10px 10px;
    }
    ul#topButtonBar li
    {
       list-style-type: none;
       float:           left;
       display:         inline;
    }
    ul#topButtonBar li a
    {
       color:           #000000;
       border-style:    solid;
       border-width:    1px;
       border-color:    #000000;
       padding:         10px 10px 10px 10px;
       display:         inline;
       float:           left;
    }
    .floatRight
    {
       width:           40%;
       border-style:    solid;
       border-width:    1px;
       border-color:    #FF0000;
       padding:         0px;
       float:           right;
       display:         inline;
    }
    
    </style>
    </head>
    <body>
    
    <div id="header">
      <ul id="topNav" class="nav">
         <li><a href="#">Link 1</a></li>
         <li><a href="#">Link 2</a></li>
         <li><a href="#">Link 3</a></li>
      </ul>
      <div class="floatRight">
        <ul id="topButtonBar">
           <li><a href="#">Right Link 1</a></li>
           <li><a href="#">Right Link 2</a></li>
        </ul>
      </div>
     </div>
    
    </body>
    </html>
    Thanks in advance for your help

  2. #2
    Join Date
    Feb 2007
    Location
    Wolverhampton
    Posts
    96
    Hello
    try the following :
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Mockup</title>
    <style>
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100&#37;;
    vertical-align: baseline;
    background: transparent;
    }

    div#header
    {
    background-color: #0000FF;
    padding: 20px 20px 20px 20px;
    width: 650px;
    height: 300px;
    }
    ul#topNav li
    {
    list-style-type: none;
    display: inline;
    }
    ul#topNav li a
    {
    color: #FFFFFF;
    display: inline;
    border-style: solid;
    border-width: 1px;
    padding: 10px 10px 10px 10px;
    }


    ul#bottomNav li
    {
    list-style-type: none;
    display: inline;
    }
    ul#bottomNav li a
    {
    color: #FFFFFF;
    display: inline;
    border-style: solid;
    border-width: 1px;
    padding: 10px 10px 10px 10px;
    }


    .floatRight
    {
    width: 31%;
    border-style: solid;

    border-color: #FF0000;
    padding: 0px;
    float: right;
    display: inline;
    }
    .floatLeft
    {
    width: 31%;
    border-style: solid;
    border-color: #FF0000;
    padding: 0px;
    float: left;
    display: inline;
    }

    </style>
    </head>
    <body>

    <div id="header">

    <div class="floatLeft">
    <ul id="topNav">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    </ul>
    </div>
    <div class="floatRight">
    <ul id="bottomNav">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    </ul>
    </div>

    </div>

    </body>
    </html>
    Just remember the longer the words you use the bigger width you will need on the floatright and left class. Also watch the width of the header it is contained in as if you make the navigation wider it will over flow to the next line..

  3. #3
    Join Date
    Nov 2010
    Posts
    2

    Thanks

    That worked. I think the issue was the float: left i had on the UL i was using for the links on the right.

    Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles