Grow your CSS skills. Land your dream job.

My footer is ignoring my flow!

  • # August 5, 2008 at 12:34 am

    Here’s the page:

    http://studentseatfree.com/search.php?s … query=flat

    The box ad is running into the footer, but I don’t know why my footer is ignoring the ad box.

    HTML:

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



    Sort by:



    Showing all coupons

    < 1 >
     All Listings
    Restaurant Type Restaurant Name Discount Type Description
    add auth test Adamson’s Wharf Flat Gonna see if this dinglecheese updates!
    Chinese Heough Yes! Flat $3 off with student ID
    Date Test The Roasting Company Flat Friggin meow yes
    Deli Douglas’ Deli Flat $5 off any purchase of $30 or more
    test auth test flat a;lsdfjkas;ldfjk


    CSS:

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

    body
    {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size:12px;
    }

    .everything
    {
    background:url(images/bg.jpg);
    background-position: center top;
    background-repeat:repeat-y;
    margin:0px auto;
    width:999px;
    display:block;
    }

    .searchbox
    {
    background:url(images/topgreen.jpg);
    background-repeat:no-repeat;
    height:30px;
    width:999px;
    }

    .searchformbox
    {
    margin-top:-27px;
    margin-left:30px;
    }

    .logobox
    {
    background:url(images/newlogo.jpg);
    width:175px;
    min-height:135px;
    height:135px;
    float:left;
    display:inline;
    margin-left:20px;
    margin-top:10px;
    }

    .adtopbox
    {
    background:url(images/adtopholder.jpg);
    width:730px;
    min-height:90px;
    height:90px;
    margin-left:200px;
    margin-top:20px;
    }

    .adbox
    {
    background:url(images/adboxholder.jpg);
    width:300px;
    min-height:250px;
    height:250px;
    float:right;
    margin-right:70px;
    margin-top:15px;
    }

    .contentbox
    {
    width:560px;
    min-height:100px;
    padding: 5px;
    background-position: left top;
    margin-left:30px;
    }

    .results
    {
    margin-left:30px;
    }

    .resultspadding
    {
    padding:5px;
    }

    .floatleft {
    float: left;
    margin: 0px 10px 10px 0px;
    }

    .refine
    {
    background-color:#eeeeee;
    min-height:25px;
    width:890px;
    padding:5px;
    margin-left:30px;
    margin-top:40px;
    background-position: center top;

    }

    /*Footer*/

    #footer {
    padding:10px 0px 70px 10px;
    color:#0c0c0c;
    width:951px;
    background-color:#daf2c8;
    font-size:9px;
    text-align: left;
    line-height:12px;
    margin:35px auto 0px;
    }

    #footer img {
    float:left;
    margin-right:10px;
    }

    #footer span {
    display:block;
    float:left;
    width:300px;
    }

    #footer a {
    color:#9e8292;
    text-decoration:none;
    }

    img {border:none}

    Thanks.

    # August 5, 2008 at 2:27 am

    When you float your material, you need to clear the floats. Otherwise if one column is shorter than the other, the footer can move up to fill the space. Try adding a class to your css like this

    .clear { clear:both; }

    then after your the floated divs, just do this

    <div class="clear"></div>

    Try that. You can also google clearing floats. I chris has some of that in his series about wordpress, try watching that, it will open your eyes to alot.

    I am not sure that is your problem, but that’s what I think it is.

    # August 5, 2008 at 11:34 am

    Yep! That was it. Thanks so much!

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

You must be logged in to reply to this topic.

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