开发者

How can I achieve a complicated CSS layout?

I have a page here. There is a contents panel, and a content panel. I would like to center the co开发者_如何学Cntent, 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.


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.


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


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜