Let's say I have four divs. One is 100% width X 163 pix, let's call this one header. It has a white background. It is the container for the other divs. Then we have one that is 230px X 163px. It has an image as the background, let's call it AMBLLogo. I want it positioned at 0px(top), 361px(left) inside the header. The third one is 113px X 163px. It also has an image background that is aligned to the top. Let's call it MSBLLogo. I want it positioned 0px(top), 806px(left) inside the header. The fourth, called AMBLBG, one is 1280px X 116px and has an image background and positioned at 34px (top), 0px (left) inside the header and it will stay at it's position inside the header when the it is resized. Images are located here: http://www.austinmetrobaseball.com/2005_redesign/ How can I accomplish this using CSS? Nothing shows using the following CSS: div#header { width:100%; /*margin:0px auto*/ /*if you alter the width of this div use the margin0px auto to center the div instead of align=center*/ height:163px; border: 1px solid #00318C; background-color: #fff; position:relative; } #header .AMBLLogo { background-image:url("AMBLLogo.gif"); background-repeat:no-repeat; background-position:center; height:163px; position: absolute; left: 361px; top: 0px; } #header .MSBLLogo { background-image:url("MSBLLogo.gif"); background-repeat:no-repeat; background-position:center; height:163px; position:absolute; left: 806px; top: 0px; } #header .AMBLBG { background-image:url("AMBLBG.gif"); background-repeat:no-repeat; background-position:center; height:163px; position: absolute; left: 0px; top: 0px; } Code (markup): This is my HTML? <div align="center" id="header"> <div id="AMBLLogo"></div> <div id="MSBLLogo"></div> <div id="AMBLBG"></div> </div> Code (markup):