Positioning images outside of main content

Question

I'm having various problems with positioning divs both inside and outside of the main content area in the following example:

http://unclemort.com/wp/

I've got a big letter "S" to the top left of the header, but in Firefox this pushes down the large image (with the red sorrounding box) in the main content area. Funny thing is that in IE it displays as I want it to, with the main large image closer to the bottom of the header.

The content area is 960px wide and I also want to include a footer with a big letter "L" to the bottom right. I've made the footer 1088px wide to accomodate this effect, but would like to know how I can keep the left edge of the footer inline with the left edge of the content, especially for different browser widths and resizing. Any help gratefully received!

Answer 1

Have the image in div tag . After that you need to align the div tag image in css , by giving values for following attribute.

In that you need to give the require amount pixel values.

 
margin-top:0px
margin-bottom:0px
margin-right:0px;
margin-left:0px;