Nested Layout Example : Size and Layout « Layout « HTML / CSS
- HTML / CSS
- Layout
- Size and Layout
Nested Layout Example
<!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" lang="en-US">
<head>
<title>Nested Layout Example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
#nav, #extras {
display: table-cell;
width: 100px;
padding: 1em;
border: 1px solid red;
}
#content {
display: table-cell;
padding: 1em;
border: 1px solid red;
}
.row {
display: table-row;
}
.inner-content {
display: table-cell;
width: 100px;
height: 100px;
padding: 1em;
border: 1px dashed #666;
}
</style>
</head>
<body>
<div id="nav">LEFT</div>
<div id="content">
<div class="row">
<div class="inner-content">A</div>
<div class="inner-content">B</div>
</div>
<div class="row">
<div class="inner-content">C</div>
<div class="inner-content">D</div>
</div>
</div>
<div id="extras">RIGHT</div>
</body>
</html>
Related examples in the same category