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/
精彩评论