Elements floating left around another on the bottom right

Question

I received a similar screen to the one attached here. The task is to have multiple small elements floating left to the bigger element on the bottom right.

I could easily make this work by wrapping the small elements in multiple containers or I could add the big one as number 11 in this particular scenario, but what if the number of small elements changes? I always had to adjust things manually.

Therefore I need a way (maybe via flexbox??) to always positioning the big element on the bottom right and to make the small ones float around it!

Does anyone know how to do it right?

CSS Grid would be well suited to this. https://gridbyexample.com/examples/ — sol, Oct 24 '17 at 15:05
Pretty sure not even CSS-Grid could manage this dynamically...interesting to seeif possible though. — Paulie_D, Oct 24 '17 at 15:17
Related - https://stackoverflow.com/questions/499829/how-can-i-wrap-text-around-a-bottom-right-div — Paulie_D, Oct 24 '17 at 15:33
I have not yet worked with this kind of grid, but it looks pretty good at first sight ... only problem is, it's only partially supported by ie11 and edge15 ... http://caniuse.com/#search=grid — Andy Vs-Ddac, Oct 25 '17 at 07:01
Not sure what's exactly wrong with mine or why it got the downvote. Try adding/removing as many elements as you'd like, it always shows as requested at the bottom right. — Jared Bledsoe, Oct 25 '17 at 14:54

Jared Bledsoe · Answer 1 · 2017-10-25T14:52:50.080

-1

Using CSS float to position them, simply assign class .small or .large and the elements will fit how you showed with the picture.

.small {
  width: 18%;
  height: 60px;
  background-color: red;
  float: left;
  margin: 1%;
}
.large {
  width: 38%;
  height: 130px;
  background-color: red;
  float: right;
  margin: 1%;
}

<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>

<div class="large"></div>

edited Oct 25 '17 at 14:52

answered Oct 24 '17 at 15:07

Jared Bledsoe

559
5
15

Thanks, but see, as you can read in my question, that is not what I want, since it makes this grid static ... let's say someone tells me that we need 6 items in one row instead of 5. Than I had to manually adjust the position of the 'large' element. :/ – Andy Vs-Ddac Oct 25 '17 at 06:53
You wouldn't have to adjust the position of the large one. The only thing you would need to change is the width of the elements so it may fit 6 instead of 5. The order didn't matter, I re-arranged it so the "large" element is always last so it works no matter how many elements are added. – Jared Bledsoe Oct 25 '17 at 14:50

Elements floating left around another on the bottom right

1 Answers1