Hello leleoni,
Floats are kind of hard to get to stack like that. It might be easier if you use a
two column layout... something like this -
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #fc6;
}
#container {
width: 850px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#left {
width: 425px;
float: left;
}
#right {margin: 0 0 0 425px;}
#one, #two, #three, #four,
#five, #six, #seven {
width: 300px;
margin: 10px auto;
border: 5px solid #06f;
text-align: center;
}
#one {height: 75px;}
#two, #three, #five, six {height: 125px;}
#four {height: 250px;}
#seven {height: 225px;}
</style>
</head>
<body>
<div id="container">
<div id="left">
<div id="one">1</div>
<div id="three">3</div>
<div id="five">5</div>
<div id="seven">7</div>
<!--end left--></div>
<div id="right">
<div id="two">2</div>
<div id="four">4</div>
<div id="six">6</div>
<!--end right--></div>
<!--end container--></div>
</body>
</html>