📜 ⬆️ ⬇️

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:

Works for FF3, FF4, IE8 and almost Opera.

The solution to this problem can be represented as follows:

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 .

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

All Articles