CODEWITHSUNDEEP
htmlcss
Sarah Edwards
Sarah Edwards

Reputation: 53

Placing multiple divs in two columns without container divs / wrappers

I hope you can help me out with a CSS problem I'm trying to solve.

I have a set of divs, let's say 4 for this example. I want to structure them in two vertical columns on a page, without using container divs around each of the columns.

However (here's the tricky part), I want them to be arranged so that each div falls exactly below the one above it. At the moment, I've got it so that they line up with each other along the top.

Take a look here for the code & example.

It works fine unless one of the divs on the left is longer than the div on the right, as shown in the example.

So... my problem is. How do I get it so that the green box is positioned directly underneath the blue box, rather than inline with the top of the yellow box.

I don't want to use margin-top: -60px or similar.

Using JavaScript/jQuery is fine if necessary, but a pure CSS solution would be ideal.

The important thing to remember is that I can't use container divs around the columns.

I'm not even sure this is possible, and have wasted a day trying to get it to work... if you could help, I would be very grateful - even if you just confirm it isn't possible!

Upvotes: 5

Views: 2067

Answers (3)

ngstschr
ngstschr

Reputation: 2329

here is a pure html/css way to do it.

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

.container {
  position: relative;
}
div.box {
  float: left;
  width: 50%;
}
div.box:nth-child(odd) {
  margin-right: 1px;
}
div.box:nth-child(even) {
  margin-left: -1px;
}

the margin-left and margin-right on the boxes makes sure a left box cannot float next to a left box.

Upvotes: 0

Koen.
Koen.

Reputation: 27049

There are 2 solutions, CSS3 and no support for older browsers, or a jQuery plugin.

With CSS3 Columns

#wrapper{
    column-count: 2;
    column-gap: 10px;
}

Or for greater compatibility, with vendor prefixes:

#wrapper{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}

View example on CSSDesk

with jQuery plugins

  1. As @allaire noted, Masonry in an excellent library.

  2. Then there is Wookmark, havent tested it but looks very clean.

  3. Or this jQuery.column plugin that mimics the CSS3 column behavior. (havent tried this one yet either)

And there are a lot more plugins that do columnizing, search around for masonry alternatives to find your pick.

Upvotes: 3

allaire
allaire

Reputation: 6045

I once did something similar and came to the conclusion to use jQuery, here's the plugin I used, worked well:

http://masonry.desandro.com/

Upvotes: 0

Related Questions