Mozilla 한국 커뮤니티

<DOCTYPE>
<html>
<head>
<meta>
<style>

.issue-box{position:relative; margin-bottom:15px}
.issue-width{width:470px}
.issue-cont{
color:#5f5f5f;
font-size:9pt;
line-height:150%;
text-align:justify;
padding:10px;
background-color:#f7f4ec;
border-right:5px solid #eeebe3;
border-bottom:5px solid #eeebe3;
}
* html div.issue-cont{height:100%}
.issue-tr-div{position:absolute; top:0; left:465px; width:5px; height:5px; background-color:#ffffff; overflow:hidden}
.issue-bl-div{position:relative; top:-5px; left:0; width:5px; height:5px; background-color:#ffffff; overflow:hidden}
</style>
</head>

<body>
<div>
<div>
<div>
<div></div>
이 글이 놓여 있는 바탕의 세로폭이 좌측의 상자보다 커야 하는데 DIV의 세로폭이 늘어나지 않는 이유를 도무지 알 수가 없습니다. 해결책을 부탁합니다.
</div>
</div>
<div></div>
<div></div>
</div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=euc-kr'>
<style type="text/css">
.issue-box{position:relative; margin-bottom:15px}
.issue-width{width:470px}
.issue-cont{
color:#5f5f5f;
font-size:9pt;
line-height:150%;
text-align:justify;
padding:10px;
background-color:#f7f4ec;
border-right:5px solid #eeebe3;
border-bottom:5px solid #eeebe3;
}
* html div.issue-cont{height:100%}
.issue-tr-div{position:absolute; top:0; left:465px; width:5px; height:5px; background-color:#ffffff; overflow:hidden}
.issue-bl-div{position:relative; top:-5px; left:0; width:5px; height:5px; background-color:#ffffff; overflow:hidden}
.box-or-img{width:110px; height:70px; border:1px solid black; margin-right:10px; float:left}
</style>
</head>

<body>
<div class='issue-box'>
<div class='issue-width'>
<div class='issue-cont'>
<div class='box-or-img'></div>
이 글이 놓여 있는 바탕의 세로폭이 좌측의 상자보다 커야 하는데 DIV의 세로폭이 늘어나지 않는 이유를 도무지 알 수가 없습니다. 해결책을 부탁합니다.
</div>
</div>
<div class='issue-tr-div'></div>
<div class='issue-bl-div'></div>
</div>
</body>
</html>

이 문제 또한 jump table 하고나서 거쳐가는 통과의례(?) 중 하나이지요.
현재 시도하시는 레이아웃은 .box-or-img의 높이가 고정되어 있기 때문에 그나마 간단한 경우에 해당합니다.
.issue-cont에 한줄만 추가하세요.

Code: Select all

min-height:70px;

답변에 감사드립니다.

Box자리는 원래 이미지가 놓여 질 자리입니다.
질문의 이해를 돕기 위해 DIV로 한 것이며 DIV 역시 상위의 레이어 높이가 자동 조정되지 않습니다.
그리고 이미지의 크기는 고정되어 있지 않습니다.
min-height의 용도를 정확히 이해하고 있는건 아니지만 최소한의 높이값을 유지하라는 의미 아닐까 싶습니다.
또 실제 답변 해 주신대로 사용해 보았지만 변화가 없습니다.
참고로 파폭은 1.5.0.7 한국어 버전입니다.

죄송합니다.
제거 어뚱한 곳에 min-height을 반영했습니다.
답변 주신대로 하니까 높이값이 자동으로 조정은 됩니다.
하지만 위글에서 설명했듯이 Box자리에 이미지가 들어가며 이미지의 높이를 모른다면 어떻게 해야 할지 난감합니다.

Code: Select all

<div class='issue-cont'> 
    <img style="float: left;" src="a.png"/>
    이 글이 놓여 있는 바탕의..
    <div style="clear:both;"></div>
</div>

.issue-cont에 min-height는 주셨죠?
그럼 위의 clear:both를 주목하세요.
box옆으로 글씨를 나오게 하기위해서 님은 float:left를 사용했습니다.
float를 사용할 경우 외부 레이어가 감싸주질 못합니다.
그래서 아무리 box의 세로가 늘어나도 외부 레이어의 세로는 고정되었던 것입니다.
이 float의 영향을 없애주는 것이 바로 clear: 입니다.
clear:[left|right|both] 가 있습니다.
both는 양쪽의 float 영향을 없애주는 것입니다.

참고링크:
viewtopic.php?t=5559&highlight=clear%3Aboth

오~예! 정말 감사합니다.
너무 고맙고 기쁨니다. 행운이 가득하시길...

Mozilla 한국 커뮤니티

DIV폭 자동조절, 도와주세요

DIV폭 자동조절, 도와주세요

DIV폭 자동조정, 질문 자시 올립니다.

제 의도는

반영 실수

오랜만에 답변 달아 봅니다. :)