5 replies [Last post]
cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 9 years 8 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Hi all!

I'm getting more confident with CSS by the day but have run into a bit of a brick wall on something.

I want to have a series of thumbnails (each with a title below it) in a multi-row grid. I don't care how many are on a row, so long as they simply "flow" row after row until the end, in an approximation of an old-school table but without the table.

I thought it was as simple as creating a class style like this:

.spaIntroThumbBox { text-align: center; width: 100px; display: block; float: left; margin: 0 5px 10px 5px; }

And applying that style to each image/text group:


Diamond


Geneva


Islander

Etcetera etcetera.

But the blocks don't flow one after the other consistently - they're lining up weirdly (to the right?) and many of what should be full rows have only a single item on them.

Here's a screenshot of what's happening (I added a red border to each item):

http://www.adamabrams.com/sample.jpg

I can't figure out what's making this happen. Thought this would be a simple one... (and yes, I know the height will be different if the graphics are different heights - I'll fix that...)

Any help much appreciated!

adam

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Lets start by writing valid

Lets start by writing valid code Wink

Had you bothered to validate this? in FF? using perhaps the html-tidy plugin?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

d41
d41's picture
Offline
Enthusiast
Last seen: 12 years 17 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

All the floated <p>'s

All the floated <p>'s probably need to be the same height (add height: ###)

cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 9 years 8 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Adding height did the

Adding height did the trick!

I will still run it through the validator though.

I assume there's no rational reason for the odd behaviour I was seeing? Or a reason that is so obscurely rational I wouldn't understand it? (CSS can be counter-intuitive sometimes...)

At any rate... thanks!
adam

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

you shouldn't need to run

Smile you shouldn't need to run it through the validator really, just read the code but if you haven't installed html-tidy do so as it provides a useful real time check on the source code and presents an icon in bottom right corner that is either red cross or green check mark and it can use the W3C sgml engine as does the online official validator so is pretty reliable.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

d41
d41's picture
Offline
Enthusiast
Last seen: 12 years 17 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

The reason it was doing that

The reason it was doing that is because:
Since the boxes are different heights, the ones that wrap to the next line get "stuck" on the ones that are taller and don't move all the way to the left.

If you look at your screenshot you can see that, on one of the boxes that is by itself on a line, the top left corner is higher than the bottom right corner of the box above, meaning that it got stuck. (not quite visible, but with padding/margin it does. Remove padding and margin and you can see better how it gets stuck.)