Layout with "Ears"

Very often, the imagination of the person developing the layout of the site is not limited to a width of 1024px, but it requires that the site look decent at all resolutions and correspond to the flight of the designer’s thoughts.

The problem can be represented graphically as follows:


The task of the layout is as follows:

• - regardless of the resolution (the size of the browser), the informative part of the site was in the middle;
• - graphic blocks (ears) should remain on the right and left, and these ears should be visible only when the browser screen size is enlarged, and when reduced, the part that doesn’t fit should hide (ideally so that there is no horizontal scroll bar) ;;
• - The page should be rubber from 680px to 1000px.

Works for FF3, FF4, IE8 and almost Opera.

The solution to this problem can be represented as follows:

• #corper - the most external block, cuts off what is not included in the browser window;
• #warp is a 980px block, relatively positioned in the middle of the screen, container for #content and #head;
• #head - header block, container for # left-head, # right-head;
• # left-head - left “ear”;
• # right-head - right "ear";
• #content - content.

')
The point is to make “ears” (# left-head, # right-head) absolutely located the #warp block, which is located relative to the screen in the middle and bring them out of the #head limits using the left and right negative fields. Wherein

UPD: This method is relevant only when there is a repeating background that should be on the body.
UPD2: Thanks to all users for criticism. She went in favor. A little thought, implemented a model with rubber (see the second example). I will not post the code because everyone knows where the "Vew Source" button.
UPD3: An example from practice where such a thing can be useful.


Working example: http://8xx8.ru/habrahabr/ears/ .
A working example of ears with tires 680px 1000px: http://8xx8.ru/habrahabr/ears/index1.html .