I can not understand how to impose this layout. So that I could put the background color and image to the left blocks and at the same time that the contents of the blocks were guided .. The layout is planned to be adaptive.

What should be the right structure and approach?

The block to be drawn up

I tried to do with bootstrap.

<div class="container"> <div class="row"> <div class="col-lg-6 left"> <div class="first">Первый левый блок</div> <div class="red">Красный левый блок</div> </div> <div class="col-lg-6 right">Правый блок</div> </div> </div>

The problem is that now blocks with classes left and right limited by the width of .container . Therefore, they will not be the full width.

And if I do this:

 <div class="container-fluid"> <div class="row"> <div class="col-lg-6 left"> <div class="first">Первый левый блок</div> <div class="red">Красный левый блок</div> </div> <div class="col-lg-6 right">Правый блок</div> </div> </div>

then I can make them a background color, but the content does not fit into the size of the container (along the width of the guides).

  • On ru.so solve specific problems associated with programming, rather than writing code for the author. Show how you yourself tried to create a page and what exactly was causing your problem (include your code in the question text). - Alex
  • Actually an interesting task. What otmazalis something immediately - mJeevas
  • Yes, show how you do it and why it does not suit you. - toxxxa
  • @mJeevas well, why otmazatsya? when something does not work in the layout, there must be at least something, but here there is nothing and it is not good. - Alex
  • no need to drag the bootstrap ears to where it doesn’t climb at all, typeset from scratch and everything will work out - MasterAlex

3 answers 3

In the code you give, I immediately see an error: you use the bootstrap grid for the left and right columns, but you forget about the cells in these columns.

 <div class="container-fluid"> <div class="row"> <div class="col-lg-6 left"> <div class="col-lg-12 first">Первый левый блок</div> <div class="col-lg-12 red">Красный левый блок</div> </div> <div class="col-lg-6 right">Правый блок</div> </div> </div>

depending on the desired behavior, you can also do this:

 <div class="container-fluid"> <div class="row"> <div class="col-lg-6 pull-right right">Правый блок</div> <div class="col-lg-6 first">Первый левый блок</div> <div class="col-lg-6 red">Красный левый блок</div> </div> </div>

In addition, if we use bootstrap, then instead of setting margin-left , margin-right for alignment along guides, I would use col-*-offset to add different behaviors across different grid widths through classes:

 <div class="col-lg-4 col-lg-offset-2 col-md-5 col-md-offset-1 col-sm-6"> Первый левый блок </div>

    If without bootstrapping, you can try:

     .left { width: 50%; float: left; box-sizing: border-box; -moz-box-sizing: border-box; /* Для Firefox */ text-align: right; } .right { width: 50%; float: left; box-sizing: border-box; -moz-box-sizing: border-box; /* Для Firefox */ text-align: left; } .left-gray { background-color: rgb(195,195,195); } .left-gray-content { width: 200px; margin-right: 10px; display: inline-block; text-align: left; } .left-gray-content p { padding-top: 200px; padding-bottom: 200px; } .left-red { background-color: rgb(215,0,0); } .left-red-content { width: 200px; margin-right: 10px; display: inline-block; text-align: left; } .left-red-content p { padding-top: 20px; padding-bottom: 20px; } .right-content { width: 200px; margin-left: 10px; display: inline-block; text-align: left; } .right-content p { padding-top: 30px; padding-bottom: 30px; } 
     <div class="left"> <div class="left-gray"> <div class="left-gray-content"> <p>Amet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod tempor</p> </div> </div> <div class="left-red"> <div class="left-red-content"> <p>Amet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod tempor</p> </div> </div> </div> <div class="right"> <div class="right-content"> <p>Amet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod tempor</p> <p>Amet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod tempor</p> <p>Amet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod tempor</p> </div> </div>

      With the help of CSS. Just from the left block is 50% high and 50 wide, one more block itself, and the right one is 100 meters high and 50% wide and 50% positioning is necessary and that's all ...

      • although the lower left block is less than 50% high. 20 for example, or 25, and the top everything else. - darkwoolf
      • This is more a comment than an answer. Give an example code for your words. - Alex