Removed unnecessary elements from the code, leaving only the frame.
The problem is this: when the right block right_block filled with content, the content block starts moving down.
The bread , content and first_text_box are to the left of right_block . How can this be fixed?

Picture:

enter image description here

HTML:

 <div class="container"> <div class="row"> <div class="col-lg-17 col-md-15 col-sm-24 col-xs-24"> <div class="bread"> </div> </div> <div class="col-lg-7 col-md-9 col-sm-24 col-xs-24"> <div class="right_block"> </div> </div> <div class="col-lg-17 col-md-17 col-sm-24 col-xs-24"> <div class="content"> </div> </div> <div class="col-lg-17 col-md-17 col-sm-24 col-xs-24"> <div class="first_text_box"> </div> </div> </div> </div> 

CSS:

 .bread { display: block; float: left; width: 100%; min-height: 50px; border: 2px solid #dddcdc; margin-top: 22px; } .right_block { display: block; float: right; width: 100%; border: 2px solid #dddcdc; padding: 10px; margin-top: 22px; } .content { display: block; float: left; padding: 18px; width: 100%; min-height: 240px; border: 2px solid #dddcdc; margin-top: 22px; margin-bottom: 20px; } 

    1 answer 1

    It is necessary to place the "left" blocks in one "column", then they will not depend on the height of the right block. For, otherwise, the left + right block act as if they are united by a common container .row - shift everything that is lower due to the increase in its height:

      <div class="col-lg-17 col-md-15 col-sm-24 col-xs-24"> <div class="bread"> </div> <div class="content"> </div> </div> <div class="col-lg-7 col-md-9 col-sm-24 col-xs-24"> <div class="right_block"> </div> </div> 

    In addition, if the project uses a grid of 24 columns, then for medium-sized screens, there is an error in the markup:

      <div class="col-md-9"> <div class="right_block"> </div> </div> <div class="col-md-17"> <div class="content"> </div> </div> 

    col-md-9 + col-md-17 not equal to col-md-24 - hence the crawling content

    • Thank you, did not notice. But this error appeared already later, when I decided to resize for md)) Yes, I did not change for the lower blocks. Now corrected, but the main problem was not solved ... - Artur Mark
    • @ArturMark completed the answer - lexxl
    • I did this, but now either the right block goes to the left (because its code starts before the others), or, if you throw the code under the others, the blog itself goes down. Why does the float stop working in the first case? After all, it says left and right ... - Artur Mark
    • All figured out! Thanks a lot - Artur Mark