There is a site design, you need to make a rubber layout. But this layout must meet many requirements:
- website must be rubber. But it is extremely desirable to limit the size of the site 1,200 pixel width and the minimum width of 860 pixels.
- in the header of the site there are three pictures. It is necessary to position them in such a way that the drawing of the left remained left, the drawing of the right remained on the right, and the drawing in the center was always in the center, regardless of the monitor width.
Tell me who came across such difficulties – how to solve?
Answer 1, Authority 100%
Width restriction (maximum width and minimum width) set using Max-Widht, Min-Widht . Well, with pictures, I see such a solution.
Since the width of the pictures is constant, then it is not so difficult to place them. Let each picture be 200px . That is, the overall width of the pictures will be equal to 600px . The total width 860px . We leave for content, let’s say, 600px , and the rest letes be the fields (that is, each field remains 130px ). Well, all is the left picture by placing Float: Left to the left edge of the content block, the second – Float: Right to the right edge. Central Picture Set the left field equal to Margin-Left: 200px; .
Since we need a rubber layout, then you can set the left field as a percentage of the width that the left picture takes on a relatively common width of the page.
Answer 2
max / min-width / height is pretty glufully behave in different browsers. Relative positioning and scaling to help you!
Answer 3
In short, if you have a framing tag, do it in%. If not, do in the properties of Body.
Do not do rubber layout best, but hybrid, it is a mixture of rubber and static.
All sites are mostly made on hybrid
percentages help display the site depending on external conditions. (Screen widths)
To do this, do in the dives (which are not embedded) width 100%, you can do both invested, it means that the invested div will cover 100% of the entire width of the parent division.
Tip: Nested use better px.
In general, here is not much about percentage and pixels
Do not forget also about positioning, it is important when rubber or hybrid layout