CSS Banner Layout Positioning Problems

Hi, I have this site:

And I want to create < div >s around the edges of the layout, in order to be able to place advertising banners there. How can I accomplish this effectively in a stylish and simple way?

I’ve attached an image showing in red where I want the boxes to be:

I’m sadly a bit noobish when it comes to CSS (I am editing a free CSS template I found). Would you care to give me any code examples of how I can accomplish this?

Yeah, position: relative seemed to work the best for me. Thanks for your advice, though, I’ll be sure to let you know if I encounter any future CSS problems :wink:


Sorry I missed your reply. You seem to be making progress though :slight_smile:


It depends on whether you want the banners to be in the flow of the document or not. You could for instance just place them absolutely into position (using #wrapper as the base starting point) following the format you used for some of your shadows that you have absolutely placed into position.

Alternatively if you want the banners to be part of the flow then create a new page wrapper wide enough to hold the existing wrapper content (980px) plus the two banner widths. Just give it a width and use margin:auto to centre it and then float three columns inside it (including the existing column).

The left banner column would be floated left with the appropriate width followed by the original wrapper which is now also floated left and then finally the right banner is floated left.

An alternative method is shown in a previous quiz I set.