blob: 66827176a9bf3da96878e40d5cb54fce9ceecf8a [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 300px;
width: 300px;
}
.horizontallyAligned {
float: left;
width: 150px;
}
.grayBox {
background-color: gray;
}
.redBox {
background-color: red;
}
.blueBox {
background-color: blue;
}
.greenBox {
background-color: green;
}
.yellowBox {
background-color: yellow;
}
.orangeBox {
background-color: orange;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="grayBox"></div></td>
<td><div class="grayBox"></div></td>
<td><div class="yellowBox"></div></td>
<td><div class="grayBox"></div></td>
<td><div class="grayBox"></div></td>
</tr>
<tr>
<td><div class="grayBox"></div></td>
<td><div class="grayBox"></div></td>
<td><div class="yellowBox" style="height: 200px"></div><div class="grayBox" style="height: 100px"></div></td>
<td><div class="grayBox"></div></td>
<td><div class="grayBox"></div></td>
</tr>
<tr>
<td><div class="blueBox"></div></td>
<td><div class="blueBox horizontallyAligned"></div><div class="grayBox horizontallyAligned"></div></td>
<td><div class="redBox"></div></td>
<td><div class="grayBox horizontallyAligned"></div><div class="orangeBox horizontallyAligned"></div></td>
<td><div class="orangeBox"></div></td>
</tr>
<tr>
<td><div class="grayBox"></div></td>
<td><div class="grayBox"></div></td>
<td><div class="grayBox" style="height: 100px"></div><div class="greenBox" style="height: 200px"></div></td>
<td><div class="grayBox"></div></td>
<td><div class="grayBox"></div></td>
</tr>
<tr>
<td><div class="grayBox"></div></td>
<td><div class="grayBox"></div></td>
<td><div class="greenBox"></div></td>
<td><div class="grayBox"></div></td>
<td><div class="grayBox"></div></td>
</tr>
</table>
</body>
<script>
window.scrollTo(400, 475);
</script>
</html>