We help IT Professionals succeed at work.

Float down and right

tonelm54
tonelm54 asked
on
13 Views
Last Modified: 2020-05-07
Is it possible to float divs down and right and overflow right, instead of floating right and down?
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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.

Author

Commented:
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?
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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>
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;
}




}

Author

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





CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.