text under multiple images while still having liquid wraping feature

im new to web design, and have a 3 column liquid layout. i want to post pictures of clothing in the middle column in rows and columns and have short text descriptions under each image. I can do so with divs and tables cells but that wont allow me to have the auto wrap feature or whatever its called. When i resize my window i want the rows to automatically adjust so nothing gets cut off.

im sure this is really easy, but i havent been able to find anything or figure it out.

any help at all would be appreciated thanks.

 

A live demo would help a lot

 

Get rid of the table. Just make a bunch of span wrapping the image and the text....

<div class="articleOfClothing">
	<span>
		<img
			src="images/jacket.jpg"
			alt="denim Jacket"
		/><br />
		Denim Jacket
	</span>
</div>

Code (markup):

Most people would say float them, but IMHO we have a better way that would allow you to center them - display:inline-block;

.articleOfClothing {
	display:inline;
}

.articleOfClothing span {
	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;
	width:256px;
}

Code (markup):

The two -moz properties are for dealing with FF2.x having no inline-block, and FF 3.x's inline-block being a bit screwy (setting inline-box before it seems to fix an occasional bug). We have to use a span for the inline-block because IE cannot make a block level element (like DIV) be inline block... I use the wrapping div so that when CSS is disabled each element still appears in it's own 'block' - when CSS is enabled we just set it to display:inline so that it doesn't interfere with our layout. Don't even TRY to apply any extra styling to the wrapping div - put it all on the span. If you don't care about people who have CSS disabled or might have odd CSS behaviors (like handheld users) then you can axe the wrapping div. I'd leave it in place because I try to code for as many users as possible.

Just play with your borders, margins and paddings, good to go... and using inline-block instead of floats means first you don't have to clear your floats, and second you can align them using text-align on their parent container.

You probably WILL want to fix the heights of these elements and possible set up an overflow:hidden on them to avoid them being different sizes. Tables cannot change the number shown per line, but will auto-adjust the height of all elements in a row. Non-table layouts can change the number of items per line based on width, but if the items are all a different height things can go really weird really fast.

 

awesome, works perfect. Thats exactly what i was looking for. Thanks for all the additional info too, very helpful

let me know if you have a paypal account, ill buy you a beer.