ansaurus

Question

Problem positioning a logo and a banner in Firefox using CSS

Answer 1

A:

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>

BenB 2009-11-10 14:50:46

banner is getting displayed below the logo. I want to get it displaye together. I mean in the same row. can u pls help...?

Flins 2009-11-10 14:55:49

I dont use any container DIV.. all codes comes after body tag.<body><div id ="logo"></div><div id="banner"></div></body>Am new to programming.. Thnks for your patience an help...

Flins 2009-11-10 14:59:35

Answer 2

+5 A:

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.

Nimbuz 2009-11-10 14:51:07

Answer 3

A:

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

Chris 2009-11-10 14:55:02

I dont use any container DIV.. all codes comes after body tag. <body> <div id ="logo"> </div> <div id="banner"></div> </body> Am new to programming.. Thnks for your patience an help... Coul u pls help me to sort it out ??

Flins 2009-11-10 15:01:27

Answer 4

A:

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;
}

Mark Biek 2009-11-10 15:02:50

The borders are there just to make it easier to see where the divs are when they don't have any content in them.

Mark Biek 2009-11-10 15:03:49

ansaurus

tags:

views:

answers:

Problem positioning a logo and a banner in Firefox using CSS

related questions