description of the problem, the background of the problem and what methods you have tried
the actual effect I wrote: https://codepen.io/piscdong/p.
left and right two-column layout. Now the orange on the left is floating, and there are a number of unknown white floating div
in the red part on the right. The problem now is, the red part on the right. I originally hoped that I could adapt to the height according to the content inside, but now it seems to be as high as the left.
how should this situation be changed? thank you
related codes
html
<div class="top">
<div class="left"></div>
<div class="right">
<div class="right_1">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="right_2"></div>
</div>
</div>
<div class="bottom"></div>css
.top {
background: -sharpeee;
}
.top:after {
content: "";
display: block;
clear: both;
}
.left {
float: left;
width: 200px;
height: 200px;
background: -sharpf90;
}
.right {
margin-left: 210px;
background: -sharp036;
}
.right_1 {
background: -sharp900;
}
.right_1:after {
content: "";
display: block;
clear: both;
}
.block {
float: left;
width: 100px;
height: 100px;
margin: 5px;
background: -sharpfff;
}
.right_2 {
height: 20px;
background: -sharp009;
}
.bottom {
background: -sharpccc;
height: 20px;
}solution
Thank you @ Haiiz for your answer. The solution is as follows
css
.right {
float: right;
width: calc(100% - 210px);
background: -sharp036;
}actual effect: https://codepen.io/piscdong/p.