Pure CSS layout similar to Gridalicious Theme

[vnvillar]

Hey Guys!

I’m new here and hoping you could help me with my problem.

I wanted to have a layout that is similar with Reform & Revolution site (http://reformrevolution.com) and they are using a WordPress Theme that’s called Gridalicious (http://suprb.com/#gridalicious).

With that kind of layout is it possible with pure CSS only?

I hope you could help me..

Thanks so much guys!

Best,
Val Villar

[TheDoc]

The layout itself is certainly possible with CSS, yes. Definitely need a fluid width on it though.

[vnvillar]

"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!

[screencat]

Not 100% sure but I think you can not do it that way because floats work differently: The elements float in the order they are put into markup. That means: div 4 can not float left BEFORE div 3 (and so on), so it "waits until div 3 is finished" and that’s why you get that gap. Am I right?

The divs on reformrevolution are positioned absolute. I don’t know why they do it, maybe it has something to do with their Javascript which loads/adds content when you scroll to the bottom of the page.

You can rebuild that structure by building columns with divs (fixed width, float) and then placing divs (fixed or variable height) as the boxes inside that columns. You can also place smaller columns inside one larger column to split the content.

And looking at http://suprb.com/#gridalicious on picture 1, box #14 would be a problem I think. The rest of the structure (also on picture 2 and 3) could be rebuild with the columns I suggested.

[Author]

Posts