How to layout 6 images in two rows if you want to use XHTML and CSS?
I am a bit of a self taught newbie. I have a website that layouts out some images with a brief description under them as in a product catalogue. I would like to have six images 3 on each of two rows. I have done it with a table in HTML. But I would like to redo the page in strict XHTML and CSS.
Can anyone give me a quick guide as to how to do this or point me to a good tutorial on this (I have not been able to find one)? Im planning to sort it out something like that:
div.clearer {
clear: both;
height: 0px;
}
Ok, I’m not completely disputing the table idea but… this looks more like a list to me. A list of images (and descriptions), a list of products… a sequential list of items one after the other. Why is this tabular data? What is the relationship between rows and columns?
A list can be styled to have 3 columns and 2 (or however many) rows in a similar way to koan’s method… floating the LI’s and setting width:33%. Or you could fix the width of your LI’s (presumably your images are fixed width) and allow the list to flow - showing 3 columns at your optimum resolution/viewport size but perhaps more or less depending on the size of the users viewing device - depending how flexible your layout is. You can’t do this with a table. A list is also easier to markup and output dynamically from a serverside script.
No Comments »
Filed under: Web Application Development