To create a column layout,
Set the margins and padding for the entire document as follows
<style>
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style>Define a yellow column, Later, we attach this rule to -
<style>
<!--
#level0 {
background:#FC0;
}
-->
</style>Now let us define another partition inside level0 -
<style>
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
-->
</style>Nest one more partition, the complete code is as follows-
<style>
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
#level0 {background:#FC0;}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
#level2 {background:#FFF3AC;}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {background:#CCC;}
</style>
<body>
<div id="level0">
<div id="level1">
<div id="level2">
<div id="level3">
<div id="main">
Final Content goes here...
</div>
</div>
</div>
</div>
</div>
</body>The above is the detailed content of Create a column layout using CSS. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
