What I am hoping to achieve is to have the exact coloured layout as in the pic in the link but to duplicate this same layout with a number of rows with a break for each row.

In the example the second row with grey block layers to show what I want.

This must also be IE6 friendly


Any suggestions :)


8 Years
Discussion Span
Last Post by MJ Pieterse

mmm... not 100% but i think that you should rather use a table with cell spacing and use divs for your coloring


Thanks for the quick reply.

Only problem with using the tables not really good SEO and secondly I have to include this code in Joomla opensource and it's pretty finky at the best of times when inserting tables and a foreign code.


	<div style="width:100%; height:120px;"> <!-- container -->
		<div style="float:left; background:red; width:100px; height:100px; margin:10px;"></div>
		<div style="float:left; background:yellow; width:100px; height:100px; margin:10px;"></div>
		<div style="float:left; background:green; width:100px; height:100px; margin:10px;"></div>
	<div style="width:100%; height:120px;"> <!-- container -->
		<div style="float:left; background:blue; width:100px; height:100px; margin:10px;"></div>
		<div style="float:left; background:brown; width:100px; height:100px; margin:10px;"></div>
		<div style="float:left; background:orange; width:100px; height:100px; margin:10px;"></div>

This code will display 3 divs from left to right with 3 different colors, and a second row with 3 divs from left to right with 3 different colors.
And you can choose any color you want for the divs. An even better way is to move all style elements to css.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.