How do you float elements without a vertical gap?

Question

I am trying to float elements left. Here is my css:

width: 320px;
float: left;
border: 1px solid #ccc;
margin-top: 10px;
margin-right: 10px;
border-radius: 5px;

My Generated Output

But i want to show my div in this format like

Please help me out. How do I prevent the vertical gap using CSS?

Anis

cssdeck.com/labs/css-only-pinterest-style-columns-layout this might help. – Susurrate

as all say two columns or positioning and calculating cause I don't think those boxes will get a "fixed" height.. there is a plugin (not for free) but it is worth having a look at it: isotope.metafizzy.co/layout-modes/packery.html – Torrance

i cant use any plugin thank for helping me.. @Torrance – Anis

This is not possible with css-only, unless you reorder your content and use a column layout. Alternately you could use some JS to iterate through your content and move each to the shortest column if you don't want to manually split up your content into columns. – Grady

Also, see @Jason's answer if you only need two columns. – Grady

Answer 1

If there will always be two columns and the content is always in the left or right column, you can use float right on the 2nd column and that would resolve the issue.

.container > .content-box:nth-child(odd) {float:left}
.container > .content-box:nth-child(even) {float:right}

In the future, CSS Flexbox will resolve this issue; however, it isn't well supported as of yet.

Oistrakh

This is a good solution when two columns is enough. .parent > *:nth-child(even) {float:right} .parent > *:nth-child(odd) {float:left} – Grady

Answer 2

As div height is alter you must have the problem with floating like you're having. To solve you must use positioning techniques or you may just use margin-top in negative value for your third div.

Alternatively, you should change the markup you're having something like this:

<div class="col col1">
  <div>div one</div>
  <div>div three</div>
</div>
<div class="col col2">
  <div>div two</div>
</div>

And then you can manage the css easily...

Galcha

Answer 3

Have two different div IDs, one could be #left and the other #right. Everything you want floated on the left side should go into #left and everything you right on the right side goes into #right.

Then you want to add the following style:

#left {
  float: left;
}

That should do the trick. You'll want to apply the style of the boxes separately. If you want an example of this solution in action you can check out my blog, http://refact.io and view the source of my "Recommended Services" which has a similar layout to what you are looking for (two columns with multiple items in each column).

Let me know if this works for you.

Telencephalon

Answer 4

http://jsfiddle.net/qgdy7kd8/

.col {width:50%; float:left;}
.box {padding:1em;}

<div class="col">
<div class="box"></box>
</div>

Susurrate

Answer 5

.wrap{
  width:450px;
  border:1px solid red;
  overflow:hidden;
}

.wrap div{
  padding:10px;
}

.box1{
  width:200px;
  float:left;
  border:1px solid green;
}

.box2{
  width:200px;
  float:right;
  border:1px solid blue;
}

.box3{
  width:200px;
  float:left;
  border:1px solid yellow;
}

<div class="wrap">
    <div class="box1"> commodo rhoncus ultrices. Etiam hendrerit tellus a malesuada blandit. Integer sed dignissim sapien. Etiam auctor scelerisque nulla eu tempus. Aenean aliquet vitae velit id ornare. Duis at ultrices dui.
    </div>
    <div class="box2">
        Praesent eget felis vel dolor egestas placerat id eget lacus. Ut dapibus, risus sit amet aliquam cursus, eros enim porttitor enim, et rutrum purus elit consectetur ante. Sed vel sem nisi. Integer rutrum hendrerit tincidunt. Etiam cursus ipsum vitae ornare faucibus. Cras non hendrerit massa. Quisque porttitor metus felis, et bibendum purus lobortis in. Nullam purus neque, vehicula ut metus quis, faucibus egestas lacus. Mauris sodales auctor viverra.
    </div>
    <div class="box3">
    Praesent mi magna, tincidunt id arcu sed, cursus bibendum libero. In tincidunt urna ultrices imperdiet mattis. Aenean eu ligula finibus lacus tincidunt pretium eget at erat. Praesent faucibus ullamcorper rhoncus. Morbi ac dui sit amet nibh aliquet fringilla. Integer laoreet interdum augue, ac luctus nulla facilisis eu. Proin commodo metus at felis mollis dignissim. Fusce efficitur velit id sapien bibendum, ac pretium elit dictum. Fusce eleifend ipsum 
    </div>
</div>

Considere using Masonry

EDIT: Took out the height att and adjusted the width of the "wrap" div: http://jsfiddle.net/zjL16xnn/

Balbriggan

not solve my problem, actually i have to re-arrange all the div without showing any empty css – Anis

Answer 6

What you are attempting to do is known as a "masonry layout" that is despite the element height being variable, it always lines up perfectly with the element above it.

It would take too long to go into how to designing your own, my advice is you do some googling (with the bolded text). Also here are a few links to a few frameworks commonly used:

http://masonry.desandro.com/

http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox

Protactinium

Answer 7

Is this updated Fiddle this what you're looking for?

HTML:

.one {
  float: left;
  width: 50px;
  background-color: lightblue;
}

.two {
  float: left;
  width: 50px;
  background-color: pink;
}

.oneone {
  float: left;
  width: 50px;
  background-color: orange;
}
.onetwo {
  float: left;
  width: 50px;
  background-color: lightgreen;
}

<div class="one">
  <div class="oneone">
    oneone
    <p>
    again
  </div>

  <div class="onetwo">
    onetwo
    <p>
    again
  </div>
</div>

<div class="two">
  two
  <p>
  etfgb
  <p>
  sfsd
</div>

update

Check the updated Fiddle in the top of my answer.

Footpoundal

i am also doing the same thing but not getting this output.. i also use float css but you can see my problem as in show in image.. – Anis

@Kushal, as evilUnix stated, you need to alter the markup and create two columns as I did. You can see them in the fiddle. The classes one and two are the columns. You just need to put your divs inside tow additional ones that will work as the mentioned columns. You say you're doing the same thing but not getting the same output: I'm guessing you just have the 3 text containing divs shown in the image, that's why your output is like that – Footpoundal

do you have any other solution, because my div are draggable div so when i move div from 1st column to another column, i thought it create some problem in your case ? – Anis

Oh, that's a whole different story. I suggest you post your code then so that we can see exactly what you have in hands – Footpoundal

Answer 8

You need to create two columns, and float the columns, rather than floating the individual boxes.

Necropsy

if i create two columns, and float the columns, how this help me out can you give me jsfiddle pls – Anis

No code, no example and no fiddle thats annoying. Do you thing thats an answer, I hope not. I don't know how you got an upvote. So post some codes with working examples. – Pirog

Sometimes all that is needed is to point out a different approach. The code is no more complicated than the code that was originally posted. Also - at least I can speak English. – Necropsy

If you just want to tell them a different way to accomplish what they need then you should add a comment and not an answer. As a rule of thumb you should always show some kind of code in an answer. What seems easy for you might not seem easy to another. And is there really a need to make fun of the way someone speaks? – Tangelatangelo

Is there really any need to post something unconstructive like "I don't know how you got an upvote"? No. – Necropsy

Answer 9

Internet Explorer doesn't handle negative margins properly. You'll want to position that div either relative or absolute and use the top:-50px (or however many px it takes).

Cherice