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: 5         


        

Answer 1

.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/

Answer 2

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

Answer 3

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.