가변길이를 주어 width를 %로 설정하면
main(content + right) 가 전체로 꽉 채워진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
margin: 0 auto;
background-color: #E1DDDB;
height: 100px;
}
header {
background-color: #0C4A60;
width: 100%;
height: 70px;
padding: 20px;
text-align: left;
}
.nav {
display: block;
height: 40px;
padding: 0;
vertical-align: top;
background-color: #EF6C33; /*오렌지*/
width: 300px;
}
.nav a {
position: relative;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
font-size: 16px;
padding-top: 8px;
text-decoration: none;
width: 100px;
height: 40px;
}
.nav a:hover {
font-weight: bold;
background-color: #6C7A89;
color: black;
}
.main {
margin: 0 auto;
padding: 0;
vertical-align: top;
background-color: #EF6C33; /*오렌지*/
width: 1200px;
}
.content {
background-color: #E0E7E9;
float: left;
width: 75%;
height: 1000px;
}
.right-side {
display: inline-block;
background-color: #6C7A89;
float: left;
width: 25%;
height: 1000px;
}
footer {
background-color: white;
clear: both;
width: 100%;
height: 100px;
}
</style>
</head>
<body>
<header>
<h1>header</h1>
</header>
<main class="main">
<div class="content"><h1>content</h1></div>
<div class="right-side">
<div class="nav">
<a href="#">Logout</a>
<a href="#">User Home</a>
<a href="#">Main</a>
</div>
<h1>right-side</h1>
</div>
</main>
<footer><h1>footer</h1></footer>
</body>
</html>
'개발관련 > front-end' 카테고리의 다른 글
| input type="radio" 사용시 하나만 선택하게 하기 (0) | 2021.05.25 |
|---|---|
| 어떨 때 table 태그를 사용하고 div태그를 사용해야 할까? (0) | 2021.05.24 |
| 첫 페이지 구현 1 (0) | 2021.05.12 |
| 자바스크립트 입문1 (0) | 2021.04.30 |
| 자바스크립트 입문 (0) | 2021.04.30 |
