float 썸네일형 리스트형 IE 6 FLOAT된 엘리먼트의 더블마진 버그 해결방법 - 출처 : 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 을 사용하면 이러한 현상을 해결할 수 있다. 2008. 3. 24. 11:00 더보기 display:inline; 옆으로 늘어선 블럭들 짜보기 .taglog { margin:0 0 20px 0; background:#f6fafb; border:solid 4px #e7eff2; padding:13px 11px 13px 11px; } .taglog .a{ display:inline; } -------------------------------------------------- 웹 2.0 옆으로 늘어선 블럭들 짜보기 .taglog { margin:0 0 20px 0; background:#f6fafb; border:solid 4px #e7eff2; padding:13px 11px 13px 11px; } .taglog li{ display:inline; } 같은 모양으로 출력 --------------------------.. 2008. 1. 8. 19:20 더보기 float된 엘리먼트와 감싸는 블럭의 백그라운드 문제 float:left, float:right 속성의 엘리먼트만을 포함한 블럭에 백그라운드를 적용했을때, float된 컨텐트의 높이를 잡아주지 못해서 백그라운드가 적용되지 않는다. 1. firefox의 경우 overflow:auto;를 하면 자동 클리어 (IE에 적용이 안됨) 2. firefox와 IE overflow:auto; height:지정; 양 브라우저에 모두 적용되지만, 플로우트된 엘리먼트가 지정한 height 값을 넘을 경우 스크롤이 생긴다. - 적용 예 : 높이가 정해진 디자인에 사용 가능 ex) .titleLine { overflow:auto; height:20px; border-bottom:1px solid #ddd; } .titleLine h1{ float:left } .titleLine .. 2008. 1. 8. 17:38 더보기 float 된 div를 포함한 div의 백그라운드가 안 보일때, float된 div 높이가 브라우저에 인식 안될때 clear해주는 방법 1. A에 overflow:auto; 해준다. 2. A 다음에 나오는 태그에 clear:both; 해준다. overflow:auto 자체가 clear 기능을 한다. 2007. 12. 1. 23:21 더보기 이전 1 다음