본문 바로가기

webdesign/CSS

IE 6 FLOAT된 엘리먼트의 더블마진 버그


  <div style="display: inline;float:left;background:#ddd;margin:7px 12px 15px 38px;width:195px;"><div style="height:500px;"></div>
</div>
  <div style="float:left;background:#ffd;margin:7px 0 15px 0;width:595px;"><div style="height:200px;"></div></div>
  <div style="clear:both;background:url(../images/bottom/copy.gif) no-repeat;width:802px;height:121px;margin:0 0 10px 38px;"></div>


해결방법 - 출처 : hyeonseok.com


float: left;
margin-left: 10px;

과 같은 선언을 할때 left margin 의 값은 10 pixel 이 아닌 20 pixel 이 된다. 때문에 float block 에는 float 된 방향과 같은 방향의 margin 을 사용하지 않아야 한다. 이 현상은 첫번째 float 된 block 에서만 발생을 하며 float 된 block 에 연이어 있는 float block 에서는 발생하지 않는다.

display: inline 을 사용하면 이러한 현상을 해결할 수 있다.