2 Column CSS Layout for 728px and 300px ad display

Question

I've been searching high and low for a 2 column CSS based layout that has a header, footer and a main area which contains 2 columns. Ideally the left column will display a 728px ad and never be chopped off and the right column will be 300px (for a 300x300 ad) and should be remain fixed, the rightmost side of the right column could be cut off at low resolutions as needed.

Has anyone dealt with a similar issue before? Obviously the issue arises at 1024x728 resolutions but I haven't been able to find a good way of handling this situation. I notice digg will sometimes serve up 300x300 ads in their right hand column and they just let the page horizontally scroll but I haven't been able to find/engineer a layout that's comparable.

Obviously, 728+300=1028 so I'm curious how other people have solved this problem. Cheers!

Answer 1

It seems like you need a basic 2 column layout in a non-traditional size.

How much experience do you have creating CSS based layouts from scratch?

First create a container that's 1028px wide. If you create 2 floating divs, one at 728px wide (float left)and the other at 300px wide (float right) you should be fine.

Answer 2

Here is one you can adapt to your width.

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/