Kertis van Kertis Kertis van Kertis - 1 year ago 128
CSS Question

Stretch div after floating around another div

I have right div with dynamic height and 30% width.
The goal is to have purple elements float around right div and take the remaining space after it ends. Is it possible to do this with CSS only?

enter image description here



.container {
height: 500px;
width:100%;
}

.yellow {
width: 30%;
background: yellow;
float: right;
margin: 5px;
}

.purple {
background:purple;
height: 40px;
margin: 5px;
width:100%;
float:left;
}

<html>
<div class="container">
<div class="yellow"> some content here <br/><br/><br/> some content here </div>

<div class="purple"> </div>
<div class="purple"> </div>
<div class="purple"> </div>
<div class="purple"> </div>
</div>
</html>




Don Don
Answer Source

If you avoid floating the purple boxes, and make them block formatting contexts with a overflow: hidden then you'll get the result you want.

Essentially the floating elements are causing them to clear past one another because you set the width to 100% on the purple boxes. If you leave the purple boxes in the normal flow of the document and use block formatting contexts to let them reshape based on the right floated element you'll get your result.

    .container {
      height: 500px;
      width:100%;
    }

    .yellow {
      width: 30%;
      background: yellow;
      float: right;
      margin: 5px;
    }

    .purple {
      background:purple;
      height: 40px;
      margin: 5px;
      overflow:hidden;
    }
<div class="container">
  <div class="yellow"> some content here <br/><br/><br/> some content here  </div>

   <div class="purple"> </div>
  <div class="purple"> </div>
  <div class="purple"> </div>
  <div class="purple"> </div>
</div>

Some additional reading: https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download