수다닷컴

안녕하세요 레이아웃을 하다가 도저히 안되는게 있어서 질문드려요ㅠ
갤러리 같은 부분에 많이 쓰이는 스타일인데요..
우선은 제가 나타내려고 하는 레이아웃은..

이런 나열의 레이아웃이예요

소스는..
!doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml lang=ko xml:lang=ko
head
meta http-equiv=content-type content=text/html; charset=utf-8 /
title박스 레이아웃/title
style type=text/css
!--
div.boxs {overflow:hidden; width:500px; background:#eee;}
div.boxs div {display:inline; float:left; width:100px; margin:0 0 10px 20px; background:black;}
div.box1 {height:100px;}
div.box2 {height:200px;}
div.box3 {height:100px;}
div.box4 {height:100px;}
div.box5 {clear:left; height:100px;}
div.box6 {height:100px;}
div.box7 {height:200px;}
div.box8 {height:100px;}
div.box9 {clear:left; height:100px;}
div.box10 {height:100px;}
div.box11 {height:100px;}
div.box12 {height:100px;}
--
/style
/head
body
div class=boxs
div class=box1 1/div
div class=box2 2/div
div class=box3 /div
div class=box4 /div
div class=box5 /div
div class=box6 /div
div class=box7 /div
div class=box8 /div
div class=box9 /div
div class=box10 /div
div class=box11 /div
div class=box12 /div
/div
/body
/html

다음 줄로 넘어갔을 때 처음 박스에 clear:left 를 줬어요
중간에 긴 박스가 있기때문에 틀어지는 걸 방지하기 위해서요

현재 이렇게 코딩했을때 위에 사진처럼 맞게 보이는 브라우저는
파폭, 사파리, 오페라 입니다.

그런데.. ie에서는 많이 틀어져요

위의 사진처럼 많이 틀어지네요
ie에서 정렬이 잘 되게 하려면 어떻게 해야 할까요?
도와주세요 ㅠ

신청하기