묻고답하기
아래 소스
2008.05.06 19:21
미티고 환장하고 팔딱 뛰겠슴당.....
div로 레이아웃을 만드는 중인데
아래 소스로 작성 중인데 오른쪽과 왼쪽으로 경계가 나뉘어 지는 부분에서 float가 제대로 작동하지 않는 것 같습니다. 소스에서 수정해야 할 곳을 좀 알려주세요 ㅠ.ㅠ
#contents .right 전체부분이 #contents .left 오른쪽에 와야 합니다.
<html>
<head>
<style>
body {
background-image: url(../img/bg.jpg);
background-repeat:repeat;
margin:0;
}
.login , .menu {
width: 990px;
margin:0px;
padding: 0px;
background-color:#3399CC;
}
#contents { width:990px; margin:0;}
#contents .left {float:left; width:570px; margin:0; height:500px; background-color:#009933;}
#contents .right { width:420px; margin:0 0 0 570px; height:500px; background-color:#FF0000;}
.rTop { width:420px; height:145px; margin:0; background-color:#FF9900;}
.rMiddle { width:420px; height:140px; margin:0; background-color:#FFCC33}
.rBottom { width:420px; height:110px; margin:0; background-color:#FF9999;}
.copy { width:420px; height:95px; margin:0; background-color:#FFCCFF;}
.cleardiv { clear:both; margin:0;}
</style>
</head>
<body>
<!-- Start TopMenu -->
<div id="Top">
<div class="login">TopMenu</div>
<div class="menu">FlashMenu</div>
</div>
<!-- End TopMenu -->
<!-- Start contents -->
<div id="contents">
<!-- Start Contents Left -->
<div class="left">왼쪽 큰이미지</div>
<!-- End Contents Left -->
<!-- Start Contents Right -->
<div class="right">
<div class="rTop">오른쪽 첫번째</div>
<div class="rMiddle">오른쪽 두번째</div>
<div class="rBottom">오른쪽 세번째</div>
<div class="copy">오른쪽 네번째</div>
</div>
<!-- End Contents Right -->
</div>
<!-- End contents -->
</body>
</html>
댓글 2
-
guny
2008.05.06 23:12
-
궁금해서 미치겠어요
2008.05.07 10:03
너무 ^^ 감사합니다. 일단 기초적인 실마리는 풀렷는데....
단지 한가지 버그가 생겼어요... 다시 질문 올리도록 하겠습니다.
도와 주세요 ^^
#contents .right { width:420px; float:right; height:500px; background-color:#FF0000;}