Catalogue item layout

Depends how involved you want to get (and daring or comfortable you feel) with CSS and (X)HTML. You could go full out and try it without tables, or use as simple a table structure you can manage with XHTML also.

Are you fellin' lucky?

With my GungHo attitudde I would try to go with the css/(X)HTML implementation. Not sure if I am allowed to post links to the work in progress...?
I have tried to do it in tables but want to get away from tables totally.

Cheers

Andy

Then you'll want to look at floats. Have you come across using or used the float declaration before?

The easiest way to test them is setup a few rectangle-shaped divs and play about with the float declaration for the CSS of each one.

The declarations are simple enough:

float: left;

or

float: right;

and to stop an element (i.e. a div) from floating (or being affected by a float I should say), add:

clear: both (or clear: left; or clear: right... depending on the elements' float declaration beforehand).

And so to line up items beside each other I would assign a "float:left;" to each of them then? I have tried using it before but never been exactly sure what the heck it is doing. Are these the only 2 parameters, left and right?

Cheers

Andy

Yep, float: left; and float: right; but the key to it is the clear: left; clear: right; or clear: both; declaration.

Here's a quick example: http://pub.c-o2.net/cssf/float.htm

As ever, feel free to grab the code and play about.

I could arrange widths and heights as appropriate for then images I want to post, I suppose. The spacing looks good as well. Will try palying with it.

Cheers

Andy

Word of warning though... you'll need to test the floats across a range of browsers (as is always the case anyway!)

Alternatives to floats are converting to inline (but, again, this has it's problems). Or, using absolutely or relatively positioned elements. However, all options have their ups and downs. I've found floats to be the easiest and most sturdy to use.