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

http://discoversecretsfor.com/divrows.htm

Any suggestions :)

Cheers

Recommended Answers

All 4 Replies

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.

Cheers

<html>
<head>
</head>
<body>
	<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>
	<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>
	</div>
</body>

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.

i'm not sure how you will align it, but add a margin to all your divs

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.