Grow your CSS skills. Land your dream job.

I’ve got a floating issue.

  • # September 2, 2008 at 6:11 pm

    Website: http://www.studentseatfree.com/brian

    I’m having an issue with getting some stuff floated correctly. The blue box with the red border should be right under the navbar and to the left of the rectangle ad. I’ve tried several different methods for clearing my float but I can never get it to go up past the rectangle ad. It’s so simple, I just can’t figure it out!

    HTML:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



    Sort by:



    leaderboard

    rectangle

    skyscraper

    Jimbo’s Pizza Shop
    Free Chick-fil-A Chicken Sandwich with purchase of med Waffle Fries and med Coke.


    CSS:

    Code:
    * { margin: 0; padding: 0; }

    body {height: 100%; font-family:Helvetica Arial, Verdana, Courier;}

    #wrapper {min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -25px; /* the bottom margin is the negative value of the footer’s height */ }

    #side-background {background-image:url(images/side-background.png); background-position:bottom left; background-repeat:no-repeat; min-height:1001px; height:1001px; padding-top:10px;}
    #content {margin:0 auto; width:1000px;}
    #topbar {background-image: url(images/top_green.jpg); background-repeat:repeat-x; min-height:74px; height:74px;}

    #logo {float:left; display:inline;}
    #leaderboard {margin-top:25px;}

    #sort-area {width:300px; margin-left: 10px; float:left; display:inline; margin-top:15px;}
    #search-area {float:right; width:220px; display:inline; margin-top:15px;}

    /*Navigation Bar*/

    ul#nav {list-style-type: none; overflow: hidden; width:742px; margin:0 auto; cursor:pointer;}

    #exclusive_button {background-image:url(images/navbar.jpg); width:223px; height:37px; min-height:37px; }
    #exclusive_button:hover {background-image:url(images/navbar.jpg); width:223px; height:37px; min-height:37px; background-position:0px 37px;}

    #regular_button {background-image:url(images/navbar.jpg); width:232px; height:37px; min-height:37px; background-position: -223px 0px; margin-left: 223px; margin-top: -37px;}
    #regular_button:hover {background-image:url(images/navbar.jpg); width:232px; height:37px; min-height:37px; background-position: -223px 37px; margin-left: 223px; margin-top: -37px;}

    #advertise_button {background-image:url(images/navbar.jpg); width:158px; height:37px; min-height:37px; background-position: -455px 0px; margin-left: 455px; margin-top: -37px;}
    #advertise_button:hover {background-image:url(images/navbar.jpg); width:158px; height:37px; min-height:37px; background-position: -455px 37px; margin-left: 455px; margin-top: -37px;}

    #contact_button {background-image:url(images/navbar.jpg); width:129px; height:37px; min-height:37px; background-position: -613px 0px; margin-left: 613px; margin-top: -37px;}
    #contact_button:hover {background-image:url(images/navbar.jpg); width:129px; height:37px; min-height:37px; background-position: -613px 37px; margin-left: 613px; margin-top: -37px;}

    ul#nav li a {position: absolute; text-indent: -9000px;}

    /*END Navigation Bar*/

    #rectanglead {float:right; margin-top:10px; width:300px;}
    #skyscraperad {float:right; margin:10px 70px 0 0; width:160px;}

    /*Listings*/

    #listings {background-color: red; width:680px; margin:10px 0 0; padding:5px;}
    .coupon {background-color: blue; width:680px;}
    .couponlogo {float:left; display:inline; width:100px; height:100px; min-height:100px; vertical-align: middle;}
    .restname {}
    .description {}

    /*END Listings*/

    /*Footer*/

    #footer {height: 25px; background-color:#daf2c8;}

    #copy-list {text-align: center; font-size: 12px; color: #781a0c; margin-top:10px;}
    #copy-list ul, #copy-list li {display: inline; margin: 0; padding: 10px 10px 0 5px;}
    #copy-list a {color: #781a0c; margin-top:10px;}

    /*END Footer*/

    img {border:0}

    Thanks!

    # September 2, 2008 at 6:19 pm

    I think clearing the float is your problem, you should clear it AFTER the "listings" not before. Since you cleared it before, it’s pushing it down past the last floated object.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".