<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;
}



Comments
이것이 바로 진정한 초초초초초보를 위한 글 --)bb
연재해주실 수 있을까요? ^^ CSS의 심오한 세계를 더 알고 싶어요~ 애독자가 되겠스니다.
굿~~~~~
그래그래 내가 원한게 이런거야.....
친구 잘하고 있네 그려~ ^^
연재하겠습니다.. ^^;;
유용한 정보 고마워여
스크랩 해갑니다
오~호 요렇게 하면 되는거군요... 나중에 참고하겠읍니다...^^
아직 익숙치 않아서 건들었다간 퇴근하는데 늦어질거 같아서요...어제도 블로그 약간 손봤다가 글들이 깨지고 사이드바 편집에서 제 갈길을 못찾아 온통 뒤죽박죽...
블로그 폭파 할뻔 했읍니다...-_-
오호라...
저놈이 문제였군...
잘 보고 갑니다. 그런데 저렇게 했는데 나중에 보니 다시 오른쪽으로 가 있는 경우가 있었습니다.
그런 때에는 어떻게 해야 하는지요? (저는 초보입니다-_-;
정확하게 어떤경우인지 말씀해 주셔야 할것 같습니다.
예제 화면을 보여주시면 더욱더 문제를 해결하는데 도움이 될 것같습니다.
완전 감사합니다~
유용한 정보 고마워여
스크랩 해갑니다
관리자만 볼 수 있는 댓글입니다.