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?

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?

• javascript
• html
• css

Share Improve this question Follow edited Sep 4, 2014 at 16:11 clifdensprit 4,90088 gold badges3636 silver badges5959 bronze badges asked Sep 4, 2014 at 14:49 user3467273user3467273 5

• 3 cssdeck./labs/css-only-pinterest-style-columns-layout this might help. – aahhaa Commented Sep 4, 2014 at 14:51
• 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 – caramba Commented Sep 4, 2014 at 14:56
• 1 i cant use any plugin thank for helping me.. @caramba – user3467273 Commented Sep 4, 2014 at 15:00
• 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. – clifdensprit Commented Sep 4, 2014 at 15:03
• Also, see @Jason's answer if you only need two columns. – clifdensprit Commented Sep 4, 2014 at 15:12

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 9

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.

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

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

http://jsfiddle/qgdy7kd8/

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

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

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 monly used:

http://masonry.desandro./

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

.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"> modo 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 modo 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/zjL16xnn/

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.

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