table, div 밀려나지 않게

키워드: div 밀려날 때, table 늘어날 때

table, td, div 태그 등으로 내용물을 둘러싸줄 때, 큰 사진이 들어가면 원래 크기보다 커지고, 늘어나고, 밀려나는 경우가 있습니다.

 

이때 css 속성 { overflow: hidden; } 을 써주더라도 FF에선 잘 뜨지만, IE에서 제대로 안 되는 경우가 허다합니다. 해결 방법을 알아봅시다.

 

간단하게 말하면 이중으로 싸주면 됩니다.

바깥의 레이어는 원래 지정하고 싶은 형태와 여백을 주시고, 그 안에 너비 100%짜리 div를 넣어주시면 됩니다.

 

<div id=”container1″>

<div class=”hideoverflow”>

내용, 이미지 등등

</div>

</div>

 

이렇게 해놓고 css 파일에는

#container1 { border:solid 1px #AAA; margin:15px; padding:10px; }

.hideoverflow { width:100%; overflow:hidden }

 

CC BY-NC-SA 4.0 This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Categories: Uncategorized

Leave a Comment

Time limit is exhausted. Please reload CAPTCHA.