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

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.

Answer 2

http://jsfiddle.net/qgdy7kd8/

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

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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