.avatar { background-color: #cacaca; height: 240px; } .wall { background-color: #a9a9a9; height: 290px; } .frends { background-color: #cacaca; height: 240px; margin-top: 25px; } .row { clear:both; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="avatar"></div> </div> <div class="col-sm-8"> <div class="wall"></div> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="frends"></div> </div> </div> </div>

When the height of the wall block increases, the frends block moves down, how can I leave the avatar under the block clearly? (To paraphrase, I need to increase the height of the wall block, the frends block under the avatar block.)

Supplement from the comments to the answers

I need frends be pressed to avatar. Under the frends will be another such block, and it should be pressed against the frends . A wall will automatically change the height.

    3 answers 3

    Did not check, but somehow so

     <div class="row"> <div class="col-sm-4"> <div class="row"> <div class="col-sm-12 avatar"></div> <div class="col-sm-12 frends"></div> <div class="col-sm-12 another one"></div> </div> </div> <div class="col-sm-8"> <div class="row"> <div class="col-sm-12 wall"></div> </div> </div> </div>

      Judging by your question. You have already set the wrong layout. You have 2 blocks row which will move on any one. Try absolute positioning for friend block and move it inside the first row

      • and without absolute positioning? I need 3 identical blocks like avatars under each other on the left, and a block with aut. tall wall on the right - Ne0lite
      • You can download somewhere to visually see, it will be so much easier :) - David
      • press the button to execute the code, I set a large height for the wall block so that it was noticeable - Ne0lite

      Why then do not immediately do it right? Layout:

       <div class="row"> <div class="col-sm-4"> <div class="avatar"></div> <div class="frends"></div> <div class="something"></div> </div> <div class="col-sm-8"> <div class="wall"></div> </div> </div>

      Styles:

       .avatar { background-color: #cacaca; height: 240px; } .wall { background-color: #a9a9a9; height: 290px; margin-top:1em;} .frends { background-color: #cacaca; height: 240px; } .something { background-color: #ccc; height: 100px; } .avatar, . something, .friends, .wall { clear:both; }
      • the same block shifts - Ne0lite
      • You can take a screenshot of the problem, but it’s not clear what you need - I. Kotov
      • press the button to execute the code, I set a large height near the wall block so that it would be noticeable - Ne0lite
      • those. do you need to increase your wall when your friends are pressed to avatar? - I. Kotov
      • Yes, I need the frends to be pressed to the avatar, under the frends there will be another such block, and it should be pressed to the frends, and the wall will automatically change the height - Ne0lite