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
<!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.
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Reply With Quote
Bookmarks