Results 1 to 6 of 6

Thread: Can't get ul lists to float

  1. #1
    Join Date
    Mar 2008

    Can't get ul lists to float


    I'm writing because I am having problems with getting these ul lists to floats. I was able to do it on another page with paragraphs and headings but for some reason these choose not to clear. I've been testing it in Firefox. Any suggestions? You'll find the code below.

    <div id="container">

    <div id="header"><img src="images/header2.jpg" alt="Dental Auxiliary Placement Service"></div>

    <div id="nav">
    <li><a href="index1.html">Home</a></li>
    <li><a href ="about.html">About</a></li>
    <li id="current" style="margin-left: 1px"><a href="services.html">Services</a></li>
    <li><a href="newsletter.html">Newsletter</a></li>
    <li><a href="staff.html">Staff</a></li>
    <li><a href="contact.html">Contact Us</a></li>

    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="associates.html">Associates</a></li>
    <div id="navline"></div>
    <div id="upper">
    <h3 style="color: yellow;">Qualified and Experienced Candidates available
    for Temporary or Permanent placement - you make the choice!</h3>
    <div id="Content">


    <li>Vacant positions</li>

    <li>Vacation coverage</li>
    <li>Maternity Leave Absence</li>
    <li>Emergency Coverage</li>
    <li>Supplemental Staffing</li>
    <li>Illness Coverage</li>
    <li>Can earn extra income on days off</li>

    <div id="sidebar">

    <li>Each candidate is registered with DAPS, Inc. </li>
    <li>Each registered client has the opportunity to interview the
    candidate and may schedule a working interview.</li>
    <li>DAPS, Inc. follows-up with your office to insure satisfaction of
    permanent placement.</li>
    <li>A written guarantee with each permanent position.</li>
    <li>Permanent positions are posted on our web site
    for your convenience.</li>
    <div class="runner">
    <h5>Additionally - <br />
    DAPS, Inc. offers guidance in the following areas to lead you and
    your team toward success!</h5>

    <ul style="font-size: .875em;">
    <li>Appointment Book Scheduling</li>
    <li>Development of the Office Manual</li>
    <li>Employee Performance Appraisals</li>
    <li>Efficient Re-Call System</li>
    <li>Office Organization</li></ul></div>

  2. #2
    Join Date
    Jan 2009
    post the css also

  3. #3
    Join Date
    Mar 2007
    Hard to tell without also seeing the accompanying css file. Is this available live somewhere?

  4. #4
    Join Date
    Mar 2008
    The header and footer sections were not included in my post but they are working fine.



    body, html {
    margin: 0; padding: 0; background: #369;
    color: #ffffff;
    body { min-width: 750px;}
    h1, h2, h3, h4, h5, h6, p {font-family: "Copperplate Gothic", Verdana, sans-serif;
    color: white; }
    p {font-size: .75em;}
    #container { background: #369; margin: 0 auto; width: 750px;}
    #header {background: #369;}
    #header h1 {padding: 10px; margin: 0px;}
    #nav {padding: 0px; width: 100&#37;; background: transparent;
    voice-family: "\"}\""; voice-family: inherit;}
    #nav ul {font-family: "Copperplate Gothic", Verdana; font-weight: bold;
    font-size: 10px; color: #4c99e6; margin: 0; margin-left: 10px;
    padding: 0;list-style: none; width: 100%}
    #nav li {display: inline; margin: 0 2px 0 0; padding: 0;
    text-transform: uppercase;}
    #nav a {float: left; display: block; color: #369; margin: 0 1px 0 0;
    padding: 5px 10px; text-decoration: none; letter-spacing: 1px;
    background-color: white; /*Default menu color*/
    border-bottom: 2px solid yellow; }
    #nav a:hover {background-color: yellow; }
    #nav #current a {/*currently selected tab*/
    background-color: yellow; border-color: yellow; }
    #navline {clear: both; padding: 0; width: 100%; height: 5px;
    line-height: 5px; background-color: yellow; }
    #content {background: #369; width: 45%; display: block; float: left; padding-left: 15px; padding-top: 5px;}
    .runner { clear: both; margin-left: 15px; }
    #sidebar { display: block; float: right; width: 45%; margin: 0px 0 325px 0; background-color: #369}
    #sidebar h3, #sidebar p, {padding-left: 15px; padding-top: 5px; }
    #upper {clear: both; margin-left: 15px;}
    #footer {background: #909; background-image: url(images/footer.png); clear: both; height: 80px; font-size: .8em;
    font-weight: normal; margin-left: 10px;}
    #footer p {padding: 10px; margin: 0; float: right;}
    #footer .address {text-align: left; float: left;}
    .effect {font-style: italic;}

  5. #5
    Join Date
    Jan 2009
    Case sensitive, see

    <div id="Content"> and #content {background: #369; width: 45&#37;; display: block; float: left; padding-left: 15px; padding-top: 5px;}

    Div is a block element, so there's no need to declare with display: block again.

  6. #6
    Join Date
    Mar 2008

    UL Lists


    Thanks so much! It was driving me crazy trying to figure that out.


Thread Information

Users Browsing this Thread

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

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