All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

CSS & Float Problem

  • # August 7, 2008 at 3:41 pm

    I’m having a display issue between Firefox and IE when working with floats. I’ve looked into the bugs with IE but I cannot figure it out why this will not work, any help would be greatly welcomed! Below is some of the code. If you would like to view the site please head to http://survey.gr-webdesigns.com/

    HTML Below:

    Code:
    < ?php echo date('D j M Y',time()); ?>
    Welcome!

    CSS Below:

    Code:
    body {
    background-color: #1D1E22;
    margin-top: 0px;
    margin-bottom: 0px;
    background-image: url(/images/header-bg.jpg);
    background-repeat: repeat-x;
    background-position: left top;
    }
    #site-outline {
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    }
    #date-outline {
    float: right;
    width: 150px;
    margin-top: 35px;
    font-size: 16px;
    color: #CCCCCC;
    margin-right: 100px;
    }
    #top-middle-outline {
    float: left;
    height: 252px;
    background-image: url(/images/top-middle.jpg);
    background-repeat: no-repeat;
    margin-top: 50px;
    font-size: 36px;
    color: #FFFFFF;
    padding-top: 20px;
    padding-left: 200px;
    width: 348px;
    display: inline;
    margin-left: 30px;
    }
    #news-outline {
    float: right;
    margin-right: 20px;
    margin-top: 5px;
    }
    #news-top-outline {
    background-image: url(/images/news-top.jpg);
    background-repeat: no-repeat;
    height: 15px;
    width: 275px;
    }
    #news-middle-outline {
    background-image: url(/images/news-middle.jpg);
    background-repeat: repeat-y;
    width: 267px;
    padding-right: 4px;
    padding-left: 4px;
    }
    #news-bottom-outline {
    background-image: url(/images/news-bottom.jpg);
    background-repeat: no-repeat;
    height: 15px;
    width: 275px;
    }
    #content-main-outline {
    width: 900px;
    margin-top: 75px;
    display: inline;
    }
    #content-top-outline {
    background-image: url(/images/main-top-bg.jpg);
    background-repeat: no-repeat;
    height: 20px;
    margin-top: 80px;
    width: 900px;
    }
    #content-middle-outline {
    background-image: url(/images/main-middle-bg.jpg);
    background-repeat: repeat-y;
    padding-right: 7px;
    padding-left: 7px;
    }
    #content-outline {
    width: 575px;
    margin-top: 15px;
    float: left;
    }
    #content-bottom-outline {
    background-image: url(/images/main-bottom-bg.jpg);
    background-repeat: no-repeat;
    height: 30px;
    width: 900px;
    }
    .clear {
    clear: both;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    }
    p {
    margin: 0px;
    padding: 0px;
    }
    # August 8, 2008 at 9:58 am

    This reply has been reported for inappropriate content.

    Could you describe in more detail what the problem is? I see some weird stuff going on, but it’s best to hear exactly what you want to be happening in order to trouble shoot. My guess is you need to be clearing the floats in some slightly different places than you currently are.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed