CSS with complicated content manager software

Ok, so I'm using this content management system with templated designs- basically each page is broken up into many different cells- each cell contains an individual html page. Most of these pages just contain bits of images that combine together to compose one final shot. It's weird and its annoying. The problem is coming when i try to use a CSS layer that goes overtop the images. I dont know if my approach doesnt work because of the way the manager puts pages together (combining many html pages into one) or because my code is garbage. The problem is with horizontal alignment- the text layer isnt lining up where I want it to, its actually scaling in movement depending on the width of the browser window. Heres my code, any thoughts?

<style type="text/css">
<!--
#headine P {margin-top: 0}
#headline {
position:absolute;
width:531px;
height:101px;
z-index:1;
left: 20px;
top: 15px;
}
.header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 35pt;
line-height: normal;
}
.subhead {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 15px;
}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
-->
</style>
<img src="/text/content/html/homepagev2_01.jpg" width="537" height="332" border="0" />
<div id="headline"> <span class="header">Colors of the Season
</span>
<p class="subhead">Fresh tints, chic styles, updated silhouettes...<br />
new chances to sparkle await </p>
</div>