Float Left and Right in Nav

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

Hello
try the following :

Quote:

<!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: 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..

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!