All geek questions in one place

How can I achieve a complex CSS layout?

I have a page here . There is a content pane and a content pane. I would like to focus the content and click on the content panel in the upper right corner. This behavior is already working.

However , the layout does not work as we would like when the page is cut. Ideally, the content will be placed on the right side of the screen, and a 5px space is maintained between the content and the content. However, for now, the content simply overlaps the content, which I don't want.

Is such a placement possible without resorting to javascript?

Edit: You may notice a scroll bar at the edge of the page. This scrollbar is not the body scrollbar, but div#main , so I don't want the content to scroll from the page.

+4
source share
3 answers

I believe this is possible using the min-width property on your container. expect problems with ie6. it does not recognize the minimum width declaration.

+3
source

Not only the minimum width. I managed to achieve the layout by doing the following:

For #main add (configure the values ​​to suit your needs):

  • min-width: 950px;

For #contents add:

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

For #contents ol remove:

  • Position
  • to the right
  • upper
+3
source

I recommend that you take a look at the layout of the YUI CSS Grid scheme to solve similar problems in the future. See http://developer.yahoo.com/yui/2/

0
source

Source: https://habr.com/ru/post/1311973/

More articles:


All Articles