You can't accomplish that with CSS only, but there is a jQuery plugin to do the trick. It's called jQuery Masonry, give it a try
Harmen
2010-10-29 19:07:19
A:
A:
You need a second wrapper:
<div id="container">
<div class="wrapper"><div class="item1">1</div></div>
<div class="wrapper"><div class="item1">2</div></div>
...
</div>
Float the wrapper and give it a fixed size. The items inside can have their own height.
I prefer using lists for this type of thing. Better HTML semantics.
<div class="container">
<ul>
<li><div class="item1">1</div></li>
<li><div class="item2">2</div></li>
</ul>
</div>
style:
.container ul {
width:400px;
}
.container li {
float:left;
height:200px;
width:180px;
}
Diodeus
2010-10-29 19:07:40
The content without CSS is ordered different this way, maybe that's not what rahul wants. The order in your example is `1, 3, 5, 7, 9, 2, 4, 6, 8`
Harmen
2010-10-29 19:09:46
Please see my edit.
rahul
2010-10-29 19:10:31
For this I need a logic to be implemented in server side to fill the contents in the wrapper. Is there any other way by which I can use the same HTML and by CSS only I can achieve the desired result?
rahul
2010-10-29 19:24:32
Isn't this what you want? http://jsfiddle.net/9SeKx/6/
Diodeus
2010-10-29 19:32:09
@Diodeus Notice the large gap between the 3/4 pairing and 5/6, I think we're trying to avoid static row heights here.
JN Web
2010-10-29 19:35:15
i.e. - your existing HTML will not work
Diodeus
2010-10-29 19:35:39
eek ... there there is always *ahem* .....tables!
Diodeus
2010-10-29 19:36:20
@Diodeus Blasphemy.
JN Web
2010-10-29 19:38:03
You can't have an aligned grid with floats without having static heights. End of story.
Diodeus
2010-10-29 19:53:34
@Diodeus Unless he can modify the output to include additional formatting, right.
JN Web
2010-10-29 20:13:49
A:
you're specifying item2 to be 10 pixels wider than item1 so I'm not clear on what you're trying to do....
FatherStorm
2010-10-29 19:07:51
A:
If you want each pair of items to be in a row, and you have control over the dynamic generation of the content, see my edits to your fiddle here
To summarize:
Markup -
<div id="container">
<div class="itemrow">
<div class="item1">1</div>
<div class="item1">2</div>
</div>
<div class="itemrow">
<div class="item2">3</div>
<div class="item1">4</div>
</div>
<div class="itemrow">
<div class="item2">5</div>
<div class="item1">6</div>
</div>
<div class="itemrow">
<div class="item1">7</div>
<div class="item2">8</div>
</div>
<div class="itemrow">
<div class="item1">9</div>
</div>
</div>
CSS -
#container
{
width: 400px;
}
.itemrow
{
float: left;
clear: both;
}
.item1
{
width: 180px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
.item2
{
width: 190px;
height: 250px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
Edit: Just read your above comment about having to edit the server side logic for rendering. Obviously this will only work if you can control that.
JN Web
2010-10-29 19:26:03