Floating Block Margin Calculation Error in IE

dev | 2004-02-20

IE 에서 float 된 block 을 다룰때 심각한 문제가 있습니다. 예를 들어..
<div style="float: left; margin-left: 10px">Float Block</div>
를 사용하게 될 경우 margin-left 는 10px 이 아니라 20px 이 됩니다. 이 현상은 IE6 에서도 여전히 발견되는 현상입니다. 왜 margin 이 두배의 값을 같는지는 알 수 없지만. 위와 같은 형태로 사용을 하게 되면 IE 에서는 원하는 결과를 얻을 수 없습니다.
margin 을 주기 위해서는 parent block 에서 margin 을 결정하고 float block 은 단지 parent block 의 contents edge 에 float 하는 방법을 써야 합니다.
<div style="margin-left: 10px">
	<div style="float: left;">
		FloatBlock
	</div>
</div>
이렇게 써야 하지요. 팁이라기 보다는 error report 같군요...^^

Comments

Post a comment

:

: 공개 되지 않습니다. Gravatar를 표시 합니다.

:

: HTML 태그를 사용할 수 없습니다.