Need a custom category template that displays posts in a thumbnail grid

Most things can be done with CSS. A great tool is the Firefox browser with the Firebug plugin. This will enable you to easily read the HTML and CSS of your page.

One problem with your site’s home page is that each post excerpt is not contained within its own div. To get what you want, each group of post title, excerpt, thumbnail, etc, must be contained in a div. See how the Twenty Ten theme does it. If each post excerpt is in its own div then with CSS you can tell the excerpt container div to be narrow enough to fit three across the page. The post excerpts will automatically flow left to right until they no longer fit, then wrap around and start a new line. The CSS might be something like this:

div.excerpt {
float:left;
width:186px;
padding-right:10px;
padding-bottom:20px;
}

yup, its pretty much that simple. I just made a page like you are describing, here
And wrapped my loop in a div called memberPost with this css:

.memberPost {
	float: left;
	width: 225px;
	margin: 10px;
}

Thanks a lot guys. I’ve put a div around the things you mentioned and now I can tweak it with the styles.css file. However due to my limited knowledge of CSS (very limited) i’m struggling to get the posts to flow left to right like you mentioned. I’m not sure if i’ve somehow put the div tags in the wrong place, or if it’s just a case of using css to get the posts to go left to right. Look at my site Geeky Medics

Here is a mockup of what i’m trying to achieve Flickr

I’m sorry for been such a noob at this and the solution is probably simple but i’m totally stuck!

My CSS is below

.post-style {
float:left; width:250px; padding-right:20px; padding-left:0px; padding-bottom:40px; font-size:14px;}

And this is where I inserted the DIV tags for “div class=”poststyle”

[Code moderated as per the Forum Rules. Please use the pastebin]

I can tell you there is something wrong with where you have put the div post style. as it is containing all the posts. If it was placed somewhere else it would repeat for each of the articles. Instead it is only appearing the once I also need to do this layout. and will keep trying to figure this one out!

yes when I insert a new div class between all the titles and thumbnails and add just a couple of div classes they do fall how you want them. They are not very tidy though due to your font size and title lengths maybe you should have a look at that once you have sorted the others out. I have attatched a picture for you to see.

https://www.benjisounds.co.uk/ben/page.jpg

As you can see the first 4 in firebug are contained within the divs I created.

Thanks a lot djsounds. Could you explain exactly where you have put the div’s as I don’t quite understand. Do I now need two sets of divs, one of post-style and the other styling-post? I’m working with the wordpress files and they look different to the source view of the site, that’s whats confusing me. This is the file i’m working with

My CODE

Where in this file do the DIV’s need to go, as when I put them in it causes the sidebar to shift to the bottom of the page

I would like to thank everyone so much for helping me out, i’ve learned so much php, css & html over the past few days it’s pretty amazing. Anyway I’ve been hacking away at it and finally figured it out!!!

I’ve done some basic CSS to style it a little, but i’m going to learn some more CSS over the next few days as i’m sure I can make the tiles look much slicker!

I really can’t thank you all enough, this seemed impossible only 2 days ago

Happy Christmas all, you’ve made my day ??

Have a look and let me know what you think, any tips on doing some cool effects with CSS would be appreciated ??
Geeky Medics