There is a site design, it is necessary to make a rubber layout. But this layout should meet many requirements:

  1. The site must be rubber. But it is highly desirable to limit the size of the site to a width of 1200 pixels and a minimum width of 860 pixels.
  2. In the header of the site there are three pictures. They need to be positioned so that the image on the left remains on the left, the image on the right remains on the right, and the image on the center is always in the center, regardless of the width of the monitor.

Tell me, who faced such difficulties - how to solve?

    3 answers 3

    The width limit (maximum width and minimum width) is set using max-widht, min-widht . Well, with pictures, I see such a solution.

    Since the width of the cards is constant, it is not so difficult to arrange them. Let each picture be 200px . That is, the total width of the images will be equal to 600px . Overall width is 860px . We leave it under the content, say, 600px , and let the rest be fields (that is, 130px remains for each field). Well, everything - the left picture is placed float: left to the left edge of the content block, the second - float: right to the right edge. We set the left margin-left: 200px; central picture equal to margin-left: 200px; .

    Since you need a rubber layout, you can set the left margin as a percentage of the width that the left picture occupies relative to the total width of the page.

    • And you can simply do position: absolute; right: 0px; -for right and position: absolute; left: 0px; -for left and is written min-with rather than min-widht and also with max-with - Rules

    max / min-width / height behave pretty buggy in different browsers. Relative positioning and scaling in% to help you!

    • "Relative positioning and scaling in% to help you!" - i.e? not very clear. - Artweb
    • Toist, apparently your knowledge is not enough to do this. - Arni

    In short, if you have a framing tag, make it in%. if not, do it in the properties of body.

    The best thing to do is not a rubber layout, but a hybrid one, a mixture of rubber and static. All sites are mostly hybrid.

    Percentages help to display the site depending on external conditions. (Screen width) For this, do divas (which are not nested) 100% width, you can also do nested ones, this means that the nested div will cover 100% of the entire width of the parent diva.

    Tip: Do nested use better px.

    In general, that's not a lot about percentages and pixels.

    Interest and other values

    Do not forget also about positioning, this is important when using rubber or hybrid layout.

    Position