Wordpress - Horizontal Posts

Okay i have seen a thread very similar to this but it never seemed to provide me the answer i need!

How can i modify my wordpress posts so that they display horizontally and are a small square (i.e. cssremix.com)

If anyone has done this..please let me know, and if you could help explain it, would be great!

I'll be working with the default wordpress theme btw, so its a clean start!

Well, you could just wrap the post in a small div and set things to float left, then it would repeat the square as many times to the right and then return.

Other than that, it could just be a custom query.

Originally Posted by Jeff Andersen Well, you could just wrap the post in a small div and set things to float left, then it would repeat the square as many times to the right and then return. Other than that, it could just be a custom query.

Do you set the div width on the index or the css file?

It's nothing specific to Wordpress really, just basic CSS styling. The most common method is to float the divs and set appropriate widths, margins, etc as you see fit.

Thanks for the advice guys, I just thought there was some special way of doing it! Clearly its pretty simple - once you get the logic your half way there, will update on how I get on!

CSS:
#content {
float:left;
width:100px;
margin:10px;
min-height:400px;
}

And i get this: http://gloomb.com/test/

the width of each post seems appropriate but they dont go next to each other, they move below

Thanks for the patience

Edit: I assume with the above code, i've changed the whole div content to 100px, rather than the individual post... for example the div should be 500px and each post should be 100px

I guess I changed the wrong one

You would have to have the float: left; on your entry div.

Change #content to .entry

Ah ha! I found it, good stuff guys thanks for the most obvious of help! Once i've had the logic etc explain to me, it all becomes so very clear. Cheers!

Problem! Having adjusted the .entry stuff to get it working I have stumbled across ths problem...

http://gloomb.tomstill.com/test/
http://gloomb.com/test/?page_id=2

You will see that the about page is also formatted like this, how can I retain the width on the about page?

I've tried adding another part to the css and changing it in the relevant template file but it screws the lot up