CODEWITHSUNDEEP
htmlcss
NotUser9123
NotUser9123

Reputation: 143

remove vertical empty space when div floating

It is my fault, I am trying to re-ask the question.

I have some code like this:

<style>
    div { 
        float: left; width: 150px; padding: 10px; 
        margin: 10px; color: #fff;
    }
</style>
<div style="background: #c33">
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #3c3;">
    b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
    b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>
<div style="background: #33c;">
    c<br>c<br>c<br>c<br>c<br>c<br>c
</div>
<div style="background: #399;">
    d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
</div>
<div style="background: #939;">
    e<br>e
</div>
<div style="background: #993;">
    f<br>f<br>f<br>f<br>f
</div>
<!--
      ... and so on ...
-->

when my visitor's screen has enough width, it is works fine like this.

big screen

when the screen become smaller, it still works fine at beginning.

smaller

but good time doesn't last long, when continually shrink screen size, it displayed like this.

continually smaller

some space appeared between c(the blue one) and e(the purple one).

enter image description here

then a(the red one) and f(the yellow one).

when shrink to 2 columns, a c and e are totally separated.

So, my question is, every my block have certain(fixed) width, uncertain(fluid) height, there is no max-width of this "block area" or say "the parent node of these blocks" or container whatever.

Can I just remove these unnecessary spaces using pure css way?

Hope this time I explained clearly, and thank you for reading my post.

Upvotes: 2

Views: 380

Answers (5)

Facundo Corradini
Facundo Corradini

Reputation: 3913

Oddly enough, the closest you could get is using damn CSS columns.. Yeah, that's right. I just said "CSS Columns"

Declaring an auto column layout using your divs width as column width, and making sure no div will wrap into multiple columns with break-inside: avoid; you can get pretty close.

  body {
    columns: 150px;
    column-gap: 2em;
  }
  div { 
    break-inside: avoid;
  }

https://jsfiddle.net/p0yLs5sh/1/

And yes, I know. I just said columns. Thought that would never be an answer.

Upvotes: 1

s89_
s89_

Reputation: 1723

Like others have said, there are plenty ways of doing it, but I'd use flexbox.

Just wrap the two boxes on the left in a container div, and use display:flex on that container, and set the flex-direction property to column and they should stack on top of one another.

Here's a great website to pick up the basics - http://flexboxfroggy.com/

Upvotes: 1

VorganHaze
VorganHaze

Reputation: 2056

You might try to left float only two, and float right the other:

.aaa,
.bbb,
.ccc {
  width: 200px;
  padding: 10px;
  margin: 20px;
  color: #fff;
}

.bbb {
  float: right;
}

.aaa,
.ccc {
  float: left;
}
<div class="aaa" style="background: #933">
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div class="bbb" style="background: #393">
  b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br> b
  <br>b<br>b<br>b<br>bbr>b<br>b<br>b<br>b<br>b
</div>
<div class="ccc" style="background: #339">
  c<br>c<br>c<br>c<br>c<br>c
</div>

Upvotes: 2

Johannes
Johannes

Reputation: 67748

To some extent you can do that, if you use left AND right floats as shown below and put a wrapper around it to let the right-floated elements not go too far right:

div {
  width: 200px;
  padding: 10px;
  margin: 20px;
  color: #fff;
}

.a {
  float: left;
}

.b {
  float: right;
}
.wrapper {
width: 520px;)
<div class="wrapper">
  <div style="background: #933" class="a">
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
  </div>
  <div style="background: #393" class="b">
    b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br> b
    <br>b<br>b<br>b<br>bbr>b<br>b<br>b<br>b<br>b
  </div>
  <div style="background: #339" class="a">
    c<br>c<br>c<br>c<br>c<br>c
  </div>
</div>

Upvotes: 1

Facundo Corradini
Facundo Corradini

Reputation: 3913

Grid, flex... and even simply using floats and clears: 

<style>
    div { 
        width: 200px; padding: 10px; 
        margin: 20px; color: #fff; 
    }
</style>
<div style="background: #933; float: left;">
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #393; float:right;">
    b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
    b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>
<div style="background: #339; clear:left;">
    c<br>c<br>c<br>c<br>c<br>c
</div>

Upvotes: 1

Related Questions