Grow your CSS skills. Land your dream job.

need help understanding div order, placement

  • # October 13, 2009 at 6:17 pm
    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">





    log in


    # October 13, 2009 at 9:47 pm

    Copy/Paste this into your CSS file.

    I simply added: ‘float: left;’ into your ‘div#footer’ section and it seems to show the footer for me.

    Code:
    /*
    Reef-Solutions CSS Document
    by Sam Tran

    http://www.reef-solutions.com

    */

    /*—– global styles —–*/

    body {
    margin: 0;
    padding: 0;

    }

    p, h1, h2, h3, h4, h5, h6, li {
    margin: 1ex 1em;
    }

    div#outerDiv {
    position: relative;
    width: 1024px;
    margin: 0 auto;
    background-color:#dfdfdf;
    }

    div#regbar {
    height: 15px;
    background-color:black;

    }

    div#header {
    height: 150px;
    background-color:#164a4d;
    }

    div#leaderAD {
    height: 75px;
    width: 468px;
    background-color:brown;
    margin: 20px 15px 0 0;
    }

    div#glider {
    height: 400px;
    width: 600px;
    background-color:black;
    float: left;
    }

    div#forumpromo {
    height: 400px;
    width: 424px;
    background-color:blue;
    float: left;
    }

    div#ebay {
    height: 400px;
    width: 600px;
    background-color:pink;
    float: left;
    }

    div#caption {
    height: 400px;
    width: 424px;
    background-color:grey;
    float: left;
    }

    div#footer {
    height: 250px;
    width: 1024px;
    background-color:black;
    float: left;
    }

    # October 13, 2009 at 10:32 pm

    i did that but the footer is smashed to the left not aligned w/ the other div’s..

    # October 14, 2009 at 2:40 am

    Works fine for me too. Suggest you update the online example so we can see the problem.

    # October 14, 2009 at 9:40 am
    "redhare" wrote:
    i did that but the footer is smashed to the left not aligned w/ the other div’s..

    Hmm. I’m not seeing that. I used it on IE8 and it works fine.

Viewing 5 posts - 16 through 20 (of 20 total)

You must be logged in to reply to this topic.

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