[CSS] div를 이용한 레이아웃

float 속성

left : 개체를 왼쪽으로 배치함
right : 개체를 오른쪽을 배치함
nond : float 시키지 않음

position 속성

static : 기본값
relative : static과 같고 offset을 지정할 수 있다.
absolute :  다른 개체에 영향을 받지 않는다.




- 코드

<style>
  .mainbox { width:700px; background-color:#eee; border:0px solid #fff; margin-top:0px; margin-left:0px; padding:10px; font-family:verdana; font-size:8pt; font-weight:bold;}
  .top { background-color:#eee; border:5px solid #fff; margin-top:0px; margin-left:0px; padding:10px; }
  .bottom { margin-top:10px; background-color:#eee; border:5px solid #fff; padding:10px 10px 10px 10px; clear:both; font-weight:bold; }
  .middle { background-color:#fff; border:0px solid #ccc; margin-top:10px; margin-left:0px; padding:10px; overflow:hidden; }
  .left1 { float:left; width:170px; background-color:#fff; border:5px solid #ccc; margin-top:0px; margin-left:0px; padding:10px; }
  .main1 { border:5px solid #ccc; background-color:#fff; margin-top:0px; margin-left:210px; padding:10px; min-height:200px; }
  .left2 { float:left; width:170px; background-color:#fff; border:5px solid #ccc; margin-top:0px; margin-left:0px; padding:10px; }
  .main2 { float:left; border:5px solid #ccc; background-color:#fff; margin-top:0px; margin-left:10px; width:230px; padding:10px; }
  .right2 { float:right; width:170px; background-color:#fff; border:5px solid #ccc; margin-top:0px; margin-left:0px; padding:10px; }
  .left3 { float:left; width:150px; background-color:#fff; border:5px solid #ccc; margin-top:0px; margin-left:0px; padding:10px; min-height:150px; }
  .main3 { float:left; width:150px; border:5px solid #ccc; background-color:#fff; margin-top:0px; margin-left:10px; padding:10px; min-height:150px; }
  .right3 { background-color:#fff; border:5px solid #ccc; margin-top:0px; margin-left:380px; padding:10px; min-height:150px; }
  .left4 { float:left; width:180px; background-color:#fff; border:5px solid #eee; margin-top:0px; margin-left:0px; padding:5px; min-height:150px; }
  .left4_1 { background-color:#fff; border:5px solid #ccc; margin:0px 0px 5px 0px; padding:0px; min-height:50px; }
  .main4 { float:left; width:150px; border:5px solid #ccc; background-color:#fff; margin-top:0px; margin-left:10px; padding:10px; min-height:150px; }
  .right4 { background-color:#fff; border:5px solid #eee; margin-top:0px; margin-left:400px; padding:5px; min-height:150px; }
  .right4_1 { background-color:#fff; border:5px solid #ccc; margin:0px 0px 5px 0px; padding:0px; min-height:50px; }
  .left5 { float:left; width:380px; background-color:#fff; border:5px solid #ccc; margin-top:0px; margin-left:0px; padding:5px; min-height:50px; }
  .right5 { background-color:#fff; border:5px solid #ccc; margin-top:0px; margin-left:410px; padding:5px; min-height:50px; }
  .under5 { background-color:#fff; border:5px solid #ccc; margin-top:10px; margin-left:0px; padding:10px; min-height:80px; }
</style>

<div class="mainbox">
  <div class="top">top</div>
   <div class="middle">
       <div class="left1">left1</div><div class="main1">main1</div>
  </div>
  <div class="middle">
       <div class="left2">left2</div><div class="main2">main2</div><div class="right2">right2</div>
  </div>
  <div class="middle">
       <div class="left3">left3</div><div class="main3">main3</div><div class="right3">right3</div>
  </div>
  <div class="middle">
       <div class="left4"><div class="left4_1">left4_1</div><div class="left4_1">left4_1</div><div class="left4_1">left4_1</div></div><div class="main4">main4</div>
       <div class="right4"><div class="right4_1">right4_1</div><div class="right4_1">right4_1</div><div class="right4_1">right4_1</div></div>
  </div>
  <div class="middle">
       <div class="left5">left5</div><div class="right5">right5</div><div class="under5">under5</div>
  </div>
  <div class="bottom">bottom</div>
</div>