Page is a not externally linkable
greencode - 4:44 pm on Oct 3, 2010 (gmt 0)
Hi. The code is pretty much the same as the previous code in this post but you'll see it a little clearer here. Basically I'd like to achieve a 4 x 2 grid but because the last of the four divs in each row has the margin right then it spans over on to the next line. Likewise I'd like the last row to have no bottom margin.
The thing is these are auto generated so I have no idea how many divs will be in the space. It'd be easy to do if there were a set amount because I could simply assign another class to those divs.
The code is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>four boxes in a row</title>
<style type="text/css">
#container {
width:1002px;
padding:10px;
border:1px solid #000;
margin:auto;
overflow:hidden;
}
#container div {
float:left;
width:241px;
padding:5px 0;
border:1px solid #600;
margin-right:10px;
margin-bottom:10px;
background-color:#fee;
text-align:center;
}
/*#container div+div+div+div {
margin-right:0;*/
}
</style>
</head>
<body>
<div id="container">
<div>box one</div>
<div>box two</div>
<div>box three</div>
<div>box four</div>
<div>box five</div>
<div>box six</div>
<div>box seven</div>
<div>box eight</div>
</div>
</body>
</html>