CSS Layout Chapter

<!doctype html>

<meta charset= "UTF-8" >
<title>Document</title>
<script src= "V.js" ></script>

<style>
*{
margin:0;padding:0;
List-style:none;
}
html,body{
width:100%;
height:100%;
}
header{
width:100%;
height:10%;
Background:yellow;
}
section{
width:80%;
margin:0 Auto;
background:red;
}
footer{
width:100%;
height:60px;
Background:blue;
}
. h_content{
width:80%;
margin:0 Auto;
Background: #ccc;
Text-align:center;
display:table;
height:100%;
}
. h_content ul{
Text-align:center;
width:60%;
Background: #aaa;
height:30px;
Display:table-cell;
Vertical-align:middle;
}
. h_content li{
Display:inline-block;
width:30px;
Background:purple;
margin-right:15px;
height:30px;
}
. s_content{
position:relative;
Overflow:hidden;
Color: #fff;
font-size:20px;
Text-align:center;
line-height:200px;
}
. c_l{
Position:absolute;
width:200px;
top:0;
left:0;
height:200px;
Background: #ffaacc;
}
. c_m{
Position:absolute;
width:200px;
top:0;
left:200px;
Background: #aaa;
Margin-bottom: -2000px;
padding-bottom:2000px;
Word-wrap:break-word;
Word-break:break-all;
/* Text Wrapping */
line-height:30px;
}
. c_r{
Background: #aaccdd;
margin-left:400px;
height:200px;
}
. c_l2{
width:300px;
height:200px;
Background: #ddaacc;
}
. c_r2{
Background: #00ff00;
margin-left:300px;
height:200px;
Margin-top: -200px;
}
. c_l3{
Float:left;
Background: #aabbcc;
height:200px;
width:150px;
}
. c_m3{
height:200px;
Background: #ccbbaa;
Margin:0 150px;
}
. c_r3{
Float:right;
Background: #aabbcc;
height:200px;
width:150px;
}
table{
width:100%;
Border:none;
Text-align:center;
Vertical-align:middle;
Color: #fff;
font-size:20px;
}
Table Td:nth-child (1) {
Background: #f0f;
}
Table Td:nth-child (3) {
Background: #f0f;
}
Table Td:nth-child (2) {
width:600px;
height:200px;
Background: #ddaacc;
}
</style>
<body>

<div class= "H_content" >
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>1</li>
<li>2</li>
</ul>
</div>

<section>
<!--positioning for adaptive-
<div class= "S_content" >
<div class= "c_l" > Left width high fixed </div>
<div class= "C_m" > middle not set height, align with left and right elements by margin,padding </div>
<div class= "C_r" > Right width fills the remaining space </div>
</div>
<!--margin-top negative for adaptive layout--
<div class= "S_content" >
<div class= "C_l2" > Left width high fixed </div>
<div class= "C_r2" > Right width fills the remaining space </div>
</div>
<!--on both sides of the width fixed, middle adaptive--
<div class= "S_content" >
<div class= "C_l3" > Left width fixed </div>
<div class= "C_r3" > Right width fixed </div>
<div class= "c_m3" > Middle width not fixed </div>
</div>
<table cellspacing= "0" >
<tr>
<td> left Adaptive </td>
<td> Middle Width Fixed </td>
<td> Right Adaptive </td>
</tr>
</table>
</section>
<footer></footer>
</body>

CSS Layout Chapter