Aligning text within a div tag doesn't come out on IE6 or IE7

Question

I'm having a couple of problems with this site. Actually it's my lack of CSS skills that is the major issue.

In any case, if you go to this page: http://winteradagency.com/Arvin/lifestyle/lifestyle.htm, you'll see that in the center area <div id="centerInc">, I want some text (aligned to the right and bottom) to be on top of the image . So I've used a <p class="centerAlign3"> and another one <p class="centerAlign2">. It all comes out fine in Firefox and the others but not on IE6 or IE7.

Also the background image that is set to take up the entire browser window looks good in Firefox and the others but stops short on the right in IE6 and IE7.

I think I'm getting confused about the absolute vs float positioning among other things.

Any help would be greatly appreciated, I'm smelling rubber as these wheels are spinning.

Answer 1

Sorry, I opened the website in IE now, just add a simple left:0; to both of the text elements(centerAlign2, and centerAlign3) and it will work

Set position relative (position:relative;) to the element containing the image, and position absolute (position:absolute;) to the text and also add (bottom:20px; right:20px;) this represents the spacing of the text inside the image. You can use any value that you want, I used 20px.