Help with Layout

[nickmcgraw]

Hi guys, I'm new here, but not so new to web design (but still less than a year of experience).

I'm trying to do something specific with layout, this in fact:

http://www.ivansharko.com/

See how the thumbnails have the same spacing between each other? I've read his coding over and over, and without seeing his CSS I don't know how he did it. Is it something to do with that <div id="postwrapper"> or maybe <div id="foliogrid"></div> right above it? I doubt its the foliogrid.

Any thoughts on how I can achieve this layout, all my thumbnails having equal space between them? Put them all in the same div tag?

Thanks guys

 

[iniedrauer]

...and without seeing his CSS I don't know how he did it.

http://www.moveplaycreate.com/wp-content/themes/MyFolioGridPro/style.css

 

[nickmcgraw]

As much as that helps, I find I still can't read his code.

I don't consider myself to be a developer by any stretch, and I find his CSS to still be confusing.

Although, I can now see his:
.post-header { margin:0 0 14px 0; }
.post-content { margin:0 0 4px 0; }

Which I think is what I wanted to know.

What I really want to know is how he got all his thumbnails to line up flush at the top, then descend nicely down the page

Sorry if I sound like a noob

 

[iniedrauer]

I'm still not sure exactly what you're asking. Yes, margins are a good way to separate divs (thus the name "margin" ). If you need to make the divs float to the left, do it. That will stack them together nicely.

 

[Frank]

What I really want to know is how he got all his thumbnails to line up flush at the top, then descend nicely down the page

He did it with position:absolute with left and top declarations, but there is a much easier way: float with margin. For both methods, see this tutorial: How to Position in CSS.

 

[Phreaddee]

The way floats work, wont work with a layout such as the example you presented.
Yes he used abs pos, but I would suggest a jquery plugin called "masonry"
It snugs up the gaps, which you otherwise would have if you simply floated them.

http://masonry.desandro.com/

 

[Janja]

That website uses a free wordpress theme called FolioGrid. You can google it and download it, if you want to use a wordpress site.

Otherwise, I use the webdeveloper tool in firefox. It's an add-on that lets you see the styles and css etc. That way you can peak into the code of any site.

I would recommend having your images in div tags with a class of foat left and a right-margin to achive that. You might have to add a clear:right to it also. You will have to play with it.