Suppose I have a 1000 pixels wide website. And it has two columns. How to make a block that would go somewhere after these two columns of width, 100% of the screen, and then the columns would go again ???

  • More specifically please. The moment with 2 columns and a width of 100% of the screen is not clear. - Gene Ant
  • one
    And the whole screen you have 146%? - Artem Yeliseyev
  • In the middle is meant in the vertical flow of blocks. - vp_arth

3 answers 3

For the block that is 1000px in 1000px , set position: absolute; width: 100%; position position: absolute; width: 100%; position position: absolute; width: 100%; position - pulls out your internal block from the stream, and the width will be stretched to the full screen for any monitor (do not forget to specify the height for the block), it remains only through the top: property top: adjust the indent from above.

Since the width will be 100%, no indents and padings on the left and right are needed, which means you can adjust the block through the indent from the top ( top: property), if necessary of course.

And about the z-index do not forget, if I understand you correctly.

  • @ Ilya Znamensky, do not specify top) .c {position: absolute; left: 0px; width: 100%; } - Sh4dow
  • But it is not easier to wrap this block in a tablet and put valign: middle (well, you understand what I’m getting at ☺), and then it will be not only in the middle of the horizontal, but also vertically. - Michael Nikolaev
  • @ Mikhail Nikolaev - for such fakes I really want to hit my hands hard (with a hammer, and preferably several times for prevention). Why make a crutch out of the blue? Not everything is "simpler" - better - Zowie
  • @AlexWindHope you do not drive me, and offer your idea how you see it !! For one and porzhem !! Phahahah - Miha Nikolaev
  • Layout for a long time is not interesting to me and answering this kind of questions too, @GenchiK has already given an adequate answer, the same thing that you wrote is nonsense. "phahahah" in your commentary only confirms your lack of commitment - Zowie

You can use the float property. You do something like this:

 <div style="clear:both"> <div style="width:50%; float:left"></div> <div style="width:50%; float:left"></div> </div> <div style="height:100px"></div> <div style="clear:both"> <div style="width:50%; float:left"></div> <div style="width:50%; float:left"></div> </div>

but I'd rather use bootstrap

    Choose:

    • width: 100vw
    • position: fixed
    • position: absolute with appropriate context