Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Pure CSS layout similar to Gridalicious Theme Re: Pure CSS layout similar to Gridalicious Theme

#64905
vnvillar
Participant
"TheDoc" wrote:
The layout itself is certainly possible with CSS, yes. Definitely need a fluid width on it though.

Thanks TheDoc,

Cool! so how should we do it? For Example:

<div id="wrapper">
<div class="post">
<img src="images/csj1.jpg" alt="1" />
</div>
<div class="post">
<img src="images/yocard.jpg" alt="1" />
</div>
<div class="post">
<img src="images/pkn.jpg" alt="1" />
</div>
<div class="post">
<img src="images/pkn.jpg" alt="1" />
</div>
<div class="post">
<img src="images/yocard.jpg" alt="1" />
</div>
</div>

/*** MY CSS ***/
#wrapper {
width: 960px;
margin: 20px auto;
}
.post {
float: left;
width: 410px;
}

Here’s how it looks like:

[attachment=0]sample.png[/attachment]

As you can notice they have different height and floated left.. I wanted Image 4 to be placed below Image 1 without that extra white space..

Can you help me on this?

Thanks much!