Wed, 2008-02-06 00:27
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
Wed, 2008-02-06 00:32
#1
Lets start by writing valid
Lets start by writing valid code 
Had you bothered to validate this? in FF? using perhaps the html-tidy plugin?
Wed, 2008-02-06 01:06
#2
All the floated <p>'s
All the floated <p>'s probably need to be the same height (add height: ###)
Wed, 2008-02-06 01:17
#3
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
Wed, 2008-02-06 01:33
#4
you shouldn't need to run
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.
Wed, 2008-02-06 01:55
#5
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.)