Problem positioning a logo and a banner in Firefox using 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.
加载中,请稍侯......
精彩评论