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:
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; }