Attribute Images Swatches Layout Preference

[niccol]

OK. If you look at the page you will see a light grey box around each block. That is just there to show you where the new div that you created actually is.

Then in the stylesheet we have applied a rule to that div.

#attribBlock{
position:relative;
border:1px solid #ddd;
width:100px;
height:260px;
text-align:center;
float:left
}

So in this rule you can see the border - which is one pixel, solid colour, and the colour is #ddd (grey).

the width of the div has been set to 100px.

then we have set float:left
this is the bit that makes the blocks stack up. Basically float left will make the element 'slide' or 'float' as far to the left as possible (and not start a new line) . The next one also floats as far to the left as it can. So it goes next to the first one. And so on.

Until they run out of space. Then they start on the next row.

All that is to say that the number of items in a row is determined by the width of the item and how many of those can fit in. So, if you set the width to 200px then that will create a 'two to a row' kind of thing.

[WetSteve]

Nick...

I get it now.... I am Old and slow but I keep at it!!!


Thank you... If you ever find yourself in Daytona Beach, FL. shoot me an e-mail... I will buy you a beer!!


later/WetSteve