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