Problem positioning a logo and a banner in Firefox using CSS_问答_开发者

Problem positioning a logo and a banner in Firefox using CSS

开发者 https://www.devze.com 2022-12-10 20:39 出处：网络

I want to use CSS in Firefox to display a logo and a flash banner on my website. The logo should be 250 X 250 and the banner 800 X 250.Both should be displayed in the same row.

相关专题：css

I want to use CSS in Firefox to display a logo and a flash banner on my website.

The logo should be 250 X 250 and the banner 800 X 250. Both should be displayed in the same row.

Here's my current CSS:

#logo{
    background:#FFFFFF;
    position:absolute;
    left: 0px;
    top: 0px;
    width: 250px;
    height: 200px;
}

#Banner{
    background: #1071A6;
    position:absolute;
    left: 250px;
    top: 200px;
    width: 850px;
    height: 250px;
}

开发者_开发问答Unfortunately, the banner is being displayed at bottom of the logo.

Any suggestions about how to properly position these elements?

Make it:

#logo {
    background:#FFFFFF;
    position:absolute;
    left: 0px;
    top: 0px;
    width: 250px;
    height: 200px;
}

#Banner {
    background: #1071A6;
    position:absolute;
    left: 250px;
    top: 0px;
    width: 850px;
    height: 250px;
}

Should be top: 0px; on both.

I'd do the markup like this:

<div id="Header">
    <div id="Banner"></div>
    <div id="logo"></div>
    <div style="clear:  both;"></div>
</div> <!-- /Header -->

And the CSS like this.

#Header {
    width:  1120px;
}

#logo {
    position:  relative;
    float:  left;
    width:  250px;
    height:  200px;
    margin:  0;
    border:  1px solid blue;
}

#Banner {
    position:  relative;
    float:  right;
    width:  850px;
    height:  250px;
    margin:  0;
    border:  1px solid red;
}

Here ya go

<html>
<head>
    <style type="text/css">

    #logo{
        background:#FFFFFF;
        position:absolute;
        left: 0px;
        top: 0px;
        width: 250px;
        height: 250px;
    }

    #Banner{
        background: #1071A6;
        position:absolute;
        left: 250px;
        top: 0px;
        width: 850px;
        height: 250px;
    }
    </style>

</head>
<body>
<div id ="logo"> 
</div> 
<div id="Banner">
</div>
</body>
</html>

It could also be that his outside container is smaller than 1100 pixels in width. Need to take in condsideration margins and padding too.