You cannot change the HTML code (I have an adaptive layout, can anyone know how to change the HTML code with different extensions, I will be very pleased if you tell me). I'll try to show what I want. There is a code:

<div class="col">...</div> <div class="col">...</div> <div class="col">...</div> <div class="col">...</div> <div class="col five">...</div>

It is necessary that the last block occupies 100% of the width and is on top, the remaining 4 blocks were under it and were 25% each. While thinking about the absolute or: before. I will be glad to separate advice. Thank.

    3 answers 3

    And if so try?

    • It is similar in essence to the method proposed by ReklatsMasters. Thank you for your attention to the question. Also an option. - koza4ok
    • It looks like, but it is more elegant and works in IE8. - ReklatsMasters
    • In ie7 it also works, but only the width will have to be set not 25 but 24 px - zhekonya

    As an example, an example . Does not work in IE8 and less.

    (.wrapper is the parent for this entire column block)

     .wrapper { position: relative; width: 100%; height: 60%; } .col { position: absolute; width: 25%; height: 50px; border: 1px solid red; text-align: center; top: 50px; } .col:nth-child(1) { left: 0; } .col:nth-child(2) { left: 25%; } .col:nth-child(3) { left: 50%; } .col:nth-child(4) { left: 75%; } .five { top: 0; width:100%; border: 1px solid #222; height: 50px; left: 0 !important; }​
    • Very interesting way through the table-row. The fact that I want to support 7-8. But the essence of the second method is clear to me. I will probably hang up the classes and do it through the absolute. Thanks. - koza4ok
    • one
      HowTo Here more. Just you set the criterion to not change the markup. - ReklatsMasters

    It all depends on what's in these columns. Fix height or not, etc.

    • And there are only solutions for fixed.? Please offer. - koza4ok 5:27