?
Solved

CSS float problem

Posted on 2006-05-08
5
Medium Priority
?
392 Views
Last Modified: 2012-05-05
Hi Experts,

Please see my code below for navigation I am trying to implement using CSS. All looks groovy except in IE. The "LOG-IN & SIGN-IN" gets wrapped to the next line instead of floating to the right. Any help is greatly appreciated. Thanks in advance!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Test</title>
<style type="text/css">
<!--
body {
      text-align: center;
      }      
body {
      font-size: small;      
      font-family: Georgia, "Times New Roman", Times, serif;
      line-height: 1.4em;
      font-weight: normal;
      color: #666;
      }      
#wrapper {
      width: 760px;
      margin: 0 auto;
      text-align: left;
      }      
#navWrapper {
      margin: 10px 0 0 0;
      width: 760px;
      height: 25px;
      }      
.floatRight {
      float: right;
}
.floatLeft {
      float: left;
}      
#navWrapper {
      background: #CCCCCC
      }      
/*  Navigation Links*/
 #mainNav {
      margin: 2px 0 0 0;
      padding: 0;
      height: 35px;
      font-weight: bold;
      font-size: 80%;
      }
#mainNav ul {
      width: 500px;
      list-style: none;
      margin: 0;
      padding: 0;
      border: none;
      }
#mainNav li {
      display: block;
      margin: 2px 0 0 3px;
      padding: 0;
      float: left;
      width: auto;
      }
#mainNav a {
      color: #000;
      display: inline;
      width: auto;
      text-decoration: none;
      margin: 0;
      padding: 10px 10px;
      }

#mainNav a:hover, #mainNav a:active {
      color: #b41d8d;
      }

#mainNav a.active:link, #mainNav a.active:visited {
      position: relative;
      z-index: 102;
      background: #BBB;
      color: #D7D493;
      font-weight: bold;
      }      
-->
</style></head>

<body>
<div id="wrapper">

<!--Main Nav begins-->
<div id="navWrapper">
<div class="floatLeft">
<ul id="mainNav">
      <li><a href="">HOME</a></li>
      <li><a href="">ABOUT US </a></li>
      <li><a href="">ARCHIVES</a></li>
      <li><a href="">CONTACT </a></li>
</ul>
</div>
<div class="floatRight">
<ul id="mainNav">
      <li><a href="">LOG-IN</a></li>
      <li><a href="">SIGN-IN</a></li>
</ul>
</div>
</div>
<!--Main Nav ends-->

</div>
</body>
</html>
0
Comment
Question by:funhyun1
5 Comments
 
LVL 8

Accepted Solution

by:
radnor earned 800 total points
ID: 16633951
Add this style to your style sheet:

ul {
      display: inline;
}    
0
 
LVL 5

Assisted Solution

by:Donnaa5dcp
Donnaa5dcp earned 400 total points
ID: 16639674
Put your <div class="floatLeft"> inside your <ul id="mainNav">
0
 
LVL 8

Expert Comment

by:radnor
ID: 16639845
worked in FF, could not get it to work in IE.

But I did get this to work in BOTH:

<!--Main Nav begins-->
<div id="navWrapper">
<ul id="mainNav" class="floatLeft">
     <li><a href="">HOME</a></li>
     <li><a href="">ABOUT US </a></li>
     <li><a href="">ARCHIVES</a></li>
     <li><a href="">CONTACT </a></li>
</ul>
<ul id="mainNav" class="floatRight">
     <li><a href="">LOG-IN</a></li>
     <li><a href="">SIGN-IN</a></li>
</ul>
</div>
<!--Main Nav ends-->
0
 
LVL 14

Assisted Solution

by:nltech
nltech earned 800 total points
ID: 16640463
the smaller div's you're floating need widths on them. try 66% for the larger and 33% for the smaller.

or, consider this alternative and much cleaner version, with no unnecessary markup, div's or classes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2 part top navbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {text-align:center;font:100.1%/115% georgia, "times new roman", times, serif;}
#wrapper {margin:0 auto;text-align:left;width:760px;}
#topnav {background-color:#ccc;width:100%;}
#topnav ul {margin:0;padding:10px 0;text-transform:uppercase;font-size:75%;font-weight:bold;}
#topnav li {display:inline;padding:0 .5em;}
#topnav ul.rightnav {float:right;width:33%;text-align:right;padding-right:.5em;}
#topnav a:link, #topnav a:visited {text-decoration:none;color:#000;}
#topnav a:active {color:#900;}
#topnav a:hover {text-decoration:underline;}

</style>
</head>

<body>
<div id="wrapper">
    <div id="topnav">
            <ul class="rightnav">
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
            </ul>
            <ul>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
            </ul>
    </div>
</div>
</body>
</html>
0
 
LVL 2

Author Comment

by:funhyun1
ID: 16640686
Thanks all for your advices! Sorry it took a bit to respond. Radnor's ul { display: inline; } seemed to do the trick but I need to throughly test using other suggestions made here as well to make sure it works throught all the popular broswers.

Thanks again and have a great day!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month15 days, 1 hour left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question