Avatar of tonelm54
tonelm54 asked on

Float down and right

Is it possible to float divs down and right and overflow right, instead of floating right and down?
CSS

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Julian Hansen

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.
ASKER
tonelm54

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?
Julian Hansen

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>

Open 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;
}

Open in new window




}
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER
tonelm54

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





ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question