positioning an image 1

[peasepud]

Hi,

I am busy creating a new site which has a centered container div of 840px, what Im trying to achieve is a logo appearing on the outside right of the container as if part of it is sitting underneath the container (it should look like this >

)

and can be found here >

http://www.peasepud.com/mattm4

It works on Firefx but on IE it appears off to the right hand side of the screen. Im also wary that on different screen resolutions its going to fall over.

What I have done is position the div containing the side of the badge (#badge) as part of the header but 853 px from the left therefore taking it outside the container.

Is there a better way to do this? Im still a novice at CSS compared to most on here so any help would be appreciated.

The relevant CSS is :

.container {
font-size: 1.2em;
background:#000000;
margin: 0 auto;
width: 840px;
border: 12px solid #333;
}

.header {
float: left;
width: 100%;
background: #000000 url(img/ttbanner4.jpg) no-repeat left;
font: normal 2.4em Verdana,sans-serif;
line-height: 150px;
text-align: center;
height:150px;
clear:both;
}

#badge {
position:relative;
left:853px;
top:18px;
width:160px;
height:250px;
background-image:url(img/badge2.png);
background-repeat:no-repeat;
}

And the HMTL:

<div class="container">
<div class="header">
<div id="badge"></div>
</div>

 

[Vragabond]

How about positioning .header relatively and positioning #badge absolutely, with a -160px (width of the element) right value. It works in FF, but I can't test it out in IE at the moment. Conceptually, it should work.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[peasepud]

Thank you,

you're a scholar and a gentleman (or lady lol).

 

[peasepud]

arrrrrghh!! how do I take back a star?

That doesnt work on other screen resolutions though, as soon as I go to a higher resolution than Im on it causes the badge to move away from the container.

 

[Vragabond]

arrrrrghh!! how do I make you read my post?

What you have right now is not even remotely similar to what I suggested. I said:

1. Give parent element relative positioning.
2. Give your #badge a right value of -160px (equivalent to its width, but negative).

You are using something completely different. My solution moves perfectly in all resolutions.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[peasepud]

aaaaaaaaaaaaaaaaarrrrrrrrrrrrrrrrrrrrggggggggggghhhhhhhhhhh!

You are right

I had nacked it up big apologies.