<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
위 그림과 같은 레이아웃을 만들기 위해 다음과 같이 css를 작성했습니다.
#container { /* width : 760px */
width:760px;
padding:10px;
margin:50px auto;
background-color:#eee;
}
#header { /* header width : 740px */
padding:10px;
}
#content { /* content width : 540px */
float : left;
width:540px;
padding:10px;
}
#sidebar { /* sidebar width : 190px */
float : right;
width:190px;
}
#footer {
clear:both;
padding:10px;
margin-top:10px;
}
자 그럼 아래 그림과 같이 레이아웃을 바꾸려면 어떻게 하면 될까요?
#container { /* width : 760px */
width:760px;
padding:10px;
margin:50px auto;
background-color:#eee;
}
#header { /* header width : 740px */
padding:10px;
background-color:#ccc;
}
#content { /* content width : 540px */
float : right;
width:540px;
padding:10px;
background-color:#c1b3d7;
}
#sidebar { /* sidebar width : 190px */
float : left;
width:190px;
background-color:#a589c1;
}
#footer {
clear:both;
padding:10px;
background-color:#ccc;
margin-top:10px;
}
