Currently, I am facing an issue with positioning 3 divs in my layout. Two of the divs are floating to the left and right respectively, while the third one should be placed under the two others. I tried using clear: both but it doesn't seem to work as expected!
CSS
.left, .right {
width: 50px;
height: 100px;
background-color: red;
}
.left {float: left;}
.right {float: right;}
.bottom {
background-color: blue;
width: 100px;
height: 100px;
clear: both;
}
HTML
<div class="left">
</div>
<div class="right">
</div>
<div class="bottom">
</div>
Your assistance in resolving this issue would be greatly appreciated. Thank you!