Really pulling my hair out over what I feel is probably quite a simple problem. I’ve gone through CSS validation (which did find some pesky unclosed tags, sorted now). I’m trying to align an image to the top right side of my page, with title text on the top left. I can do this, but when I resize the browser window the image always wants to overlap the title text before either of them resize. If I remove the margins that I’ve used to place the image then the image sits under the title text (and to the right) instead of just to the right of it, but I feel removing this (while keeping the positioning) might be key. I do need the image to be overlapped by some other elements though.
Here’s a snippet of my code for the image:
img#site-logo {
max-width: 100%;
height: auto;
clear: both;
position: relative;
z-index: 0;
margin: -12.87em 2em -16em 0px;
}
And for the site title:
#site-title a {
font-size: 4.875em;
font-weight: bold;
line-height: 78px;
padding: 0px;
margin-right: auto;
white-space: nowrap;
z-index: 2;
position: relative;
}
Site is live [here:](http://dominicpalma.com/ “here”)
; ?/>../../../uploads/2013/02/Headshot230.png” alt=”” /></div>
</div><!-- .bbp-reply-content -->
</div><!-- .reply -->
<div id=)
