Reputation: 53
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
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
Reputation: 27049
There are 2 solutions, CSS3 and no support for older browsers, or a jQuery plugin.
#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;
}
As @allaire noted, Masonry in an excellent library.
Then there is Wookmark, havent tested it but looks very clean.
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
Reputation: 6045
I once did something similar and came to the conclusion to use jQuery, here's the plugin I used, worked well:
Upvotes: 0