How can I achieve a complicated CSS layout?

Question

I have a page here. There is a contents panel, and a content panel. I would like to center the content, and push the contents panel to the top right corner. This behaviour already works.

However, the layout does not work as I would like when the page is shrunk. Ideally, the content would be pushed to the right side of the screen, and a 5px gap maintained between the content and the contents. At present, however, the contents just overlaps the content, which isn't really what I want.

Is such a layout possible, without resorting to javascript?

Edit: You may notice a scrollbar at the edge of the page. That scroll-bar is not the body's scrollbar, but div#main's, the reason being that I don't want the contents to scroll with the page.

Answer 1

i believe it is achievable using the min-width property on your container. expect problems with ie6 though. it doesn't recognize the min-width declaration.

Answer 2

Is not just min-width. I managed to achieve the layout by doing the following:

For #main add (adjust the values to fit your needs):

• min-width: 950px;

For #contents add:

• float: right;
• margin-top: 5px;
• margin-right: 20px;

For #contents ol remove:

• position
• right
• top

Answer 3

I recommend you look at YUI CSS Grid layout to achieve similar issues in the future. See http://developer.yahoo.com/yui/2/