<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrapper{
width:600px;
height:500px;
overflow:hidden;
margin:auto;
}
#section{
background-color:green;
width:100px;
height:100%;
float:left;
}
#header{
background-color:yellow;
width:100%;
height:100px;
}
#center{
background-color:blue;
width:100%;
height:300px;
}
#footer{
background-color:red;
width:100%;
height:100px;
}
#content{
width:500px;
height:500px;
float:left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="section"></div>
<div id="content">
<div id="header"> </div>
<div id="center"></div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
'프로그래밍 > html_css' 카테고리의 다른 글
css - box의 이해 (0) | 2020.08.29 |
---|---|
css - clear 이해 (0) | 2020.08.29 |
css - block의 이해 (0) | 2020.08.29 |
css - 태그의 테두리 제어 (0) | 2020.08.29 |
HTML의 기본적인 table 태그 (0) | 2020.08.26 |