div 사용시 IE 버그 질문입니다.

[raydein]

안녕하세요~

코드: 모두 선택

<style>
#col1 {float:left;              width:100px;height:100px;background:#bbb;}
#col2 {float:left;              width:200px;height:100px;background:#efc;}
#col3 {clear:left; float:left; width:100px;height:100px;background:#363;}
#col4 {float:left;              width:200px;height:100px;background:#654;}
</style>

<div id=col1>col1</div>
<div id=col2>col2</div>
<div id=col3>col3</div>
<div id=col4>col4</div>

이런 소스를 실행시켰을 때, FF에서는

1 2
3 4

이런식으로 정상적으로 잘 나오는데
IE에서는

1 2 4
3

이런식으로 나와버립니다.
IE버그라고 들었는데요,
임시방편으로

코드: 모두 선택

<div id=col1>col1</div>
<div id=col2>col2</div>
<div style='width:0px; height:0px'></div>
<div id=col3>col3</div>
<div id=col4>col4</div>

이런식으로 사용하고 있는데 불필요한 div 하나가 들어가버려서 영 찜찜하더라고요.

css로 어떻게 잘 처리하는 방법이 없을까요?

[kikiroki]

코드: 모두 선택

<style>
#col1 {float:left;              width:100px;height:100px;background:#bbb;}
#col2 {float:left;              width:200px;height:100px;background:#efc;}
#col3 {clear:left; float:left; width:100px;height:100px;background:#363;}
#col4 {float:left;              width:200px;height:100px;background:#654;}
</style>

<div>col1</div>
<div>col2</div><br>
<div>col3</div>
<div>col4</div> 

그냥 br 태그로 해결하세요..