Here are three solutions.
The markup:
The basic stylesheet (dimensions and color):
#outer {
width: 20em;
height: 20em;
}
#a1 {
background-color: #C0C0C0;
width: 80%;
height: 20%;
}
#a2 {
background-color: #800000;
width: 20%;
height: 80%;
}
#a3 {
background-color: #000080;
width: 20%;
height: 80%;
}
#a4 {
background-color: #FF0000;
width: 40%;
height: 20%;
}
#a5 {
background-color: #0000FF;
width: 20%;
height: 40%;
}
#a6 {
background-color: #FFFF00;
width: 20%;
height: 40%;
}
#a7 {
background-color: #FFFFFF;
width: 20%;
height: 20%;
}
#a8 {
background-color: #008000;
width: 40%;
height: 20%;
}
#a9 {
background-color: #FFA500;
height: 20%;
width: 80%;
}
And now the positioning:
Using float:
#a1 {
float: left;
}
#a2 {
float: right;
}
#a3 {
float: left;
}
#a4 {
float: left;
}
#a5 {
float: right;
}
#a6 {
float: left;
}
#a7 {
float: left;
}
#a8 {
float: right;
}
#a9 {
float: right;
}
Using position:
#outer {
position: relative;
}
#outer div {
position: absolute;
}
#a1 {
top: 0;
left: 0;
}
#a2 {
top: 0;
right: 0;
}
#a3 {
top: 20%;
left: 0;
}
#a4 {
top: 20%;
left: 20%;
}
#a5 {
top: 20%;
right: 20%;
}
#a6 {
top: 40%;
left: 20%;
}
#a7 {
top: 40%;
left: 40%;
}
#a8 {
bottom: 20%;
right: 20%;
}
#a9 {
bottom: 0;
right: 0;
}
Using margin:
#a1 {
}
#a2 {
margin: -20% -80% 0 80%;
}
#a3 {
margin: -60% 0 0 0;
}
#a4 {
margin: -80% -20% 0 20%;
}
#a5 {
margin: -20% -60% 0 60%;
}
#a6 {
margin: -20% -20% 0 20%;
}
#a7 {
margin: -40% -40% 0 40%;
}
#a8 {
margin: 0 -40% 0 40%;
}
#a9 {
margin: 0 -20% 0 20%;
}
