PDA

View Full Version : Div layout in rows?



sovereign6
Apr 29th, 2010, 09:37 AM
Hope someone can show me how to set up divs to display like a row of tables

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.

http://discoversecretsfor.com/divrows.htm

This must also be IE6 friendly

Any suggestions :)

Cheers

mbaker
Apr 29th, 2010, 03:17 PM
The following will produce rows of divs in the colours you have used.

In this example all of the divs are the same size.

If you need divs of different sizes you could set up classes block1, block2, etc.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<title>Rows of Divs</title>
<style type="text/css">
#container {
width: 750px;
margin: 0 auto;
}
div.block {
width:230px;
height:160px;
margin:0 15px 15px 0;
float:left;
}
div.pink { background-color:pink; }
div.azure { background-color:azure; }
div.yellow { background-color:yellow; }
div.grey { background-color:#ccc; }
div.dark { background-color:#999; }
br {clear:both;}
</style>
</head>
<body>
<div id="container">
<h1>Rows of Divs</h1>
<div class="pink block"></div>
<div class="azure block"></div>
<div class="yellow block"></div>
<br>
<div class="grey block"></div>
<div class="grey block"></div>
<div class="dark block"></div>
<br>
</div>
</body>
</html>