Float down and right

can you elaborate on what you are asking.

Float will pull the element either to the left (float: left) or to the right (float: right) of the parent element.

If you have multiple elements floated then they will sit side by side stacked left to right in a case of float: left and in reverse order when you float right.

Floats are not used much now that we have the Flexbox model though - so maybe give us an idea of what it is you are trying to do.

Ill try to explain a bit better and where I am with this, sorry. Im trying to display multiple divs but overflow to the right instead of down

Ive figured out Flexbox a bit and got the following
https://jsfiddle.net/qzkdxyju/1/
So, this is now flowing how I want, but the colums are too wide. What I want to do is set the coloums to a fixed 50px for example, not split the coloums between available width.

Any ideas?

I am not following your explanation. If I look at the fiddle I see three (dark narrow) columns with large gaps between them.

Generally you would do this

<div id="divContents">
  <div class="divBox">01</div>
  <div class="divBox">02</div>
  <div class="divBox">03</div>
  <div class="divBox">04</div>
  <div class="divBox">05</div>
  <div class="divBox">06</div>
  <div class="divBox">07</div>
  <div class="divBox">0<br/>0<br/>0<br/>0</div>
  <div class="divBox">09</div>
  <div class="divBox">10</div>
  <div class="divBox">11</div>
</div>

Select allOpen in new window

CSS

#divContents {
  min-width: 200px;
  height: 400px;
  background-color:cyan;
 
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.divBox {
  flex: 1 1 calc(33.333333% - 50px); 
  margin-left: 25px;
  margin-right: 25px;
  min-height: 40px;
  background-color:rgba(25,25,25,0.3);
  padding: 5px;
}

.divBox:nth-child(3) {
  height:200px;
}
.divBox:nth-child(2) {
  height:100px;
}

Select allOpen in new window

}

At the moment my jsFiddle outputs:-
What Im after is not having such a big gap between them, so something like:-
Any suggestions?