묻고답하기
[div + css 레이아웃] 본문길이가 길어지면 div가 망가져요ㅠ
2007.01.17 19:22
윽ㅠ 표준을 지키려고 하는데.. 잘 안되네요잉; [XHTML 1.1 변형]
요즘에는.. 페이지의 레이아웃을 짤때..
테이블[table]보다는, div를 사용하라고 권고하더군요^^..
그래서, div 레이아웃 관련글도 보고 하면서 만들고 있습니다ㅜ
[CSS]파일 소스,
/* 전체 레이아웃 결정 */
body {
font-family: '굴림', '돋움', '궁서', '바탕';
font-size: 9pt;
margin: auto; /* 가운데 정렬 */
text-align: center; /* IE 5이하에서 */
}
/* 레이아웃 결정 */
#wrap {
text-align: left;
width: 800px;
margin: 30px auto;
background-color: #CCCCCC;
border: dotted 1px #999999;
}
#head {
height: 50px;
}
#middle {
background-color: #666666;
}
#sidemenu {
float: left;
width: 200px;
}
#content {
width: 597px;
}
#foot {
height: 50px;
}
[XHTML]파일 소스,
<!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">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=euc-kr" />
<linkrel="stylesheet"type="text/css"href="style_6.css" />
<title>[레이아웃_6]</title>
</head>
<body>
<divid="wrap">
<divid="head">[상단메뉴]</div>
<divid="middle">
<divid="sidemenu">[사이드메뉴]</div>
<divid="content">[내용]</div>
</div>
<divid="foot">[카피라이트]</div>
</div>
</body>
</html>
일단, 웹브라우저로 보시면 아래와 같이 나옵니다.
───────────────────────
: [상단메뉴] :
: :
───────────────────────
: [사이드메뉴] : [내용] :
───────────────────────
: [카피라이트] :
: :
───────────────────────
일단, 저기서 [내용] 이라는 부분이 경우에 따라서는 길어질수도 있잖아요?
그런데.. [내용] 이라는 부분에 문자가 많아서.. 옆으로 길어지면 저는 아래와 같이 표시하고싶은데요.
───────────────────────
: [상단메뉴] :
: :
───────────────────────
: [사이드메뉴] : [내용] ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ :
: : ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ:
: : ㅁㅁㅁㅁㅁㅁㅁㅁ :
───────────────────────
: [카피라이트] :
: :
───────────────────────
그런데, 실제로 보면.. 아래와 같이 되더군요_-;
───────────────────────
: [상단메뉴] :
: :
───────────────────────
: [사이드메뉴] : [내용] ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ :
:ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ :
:ㅁㅁㅁㅁㅁㅁㅁㅁㅁ :
───────────────────────
: [카피라이트] :
: :
───────────────────────
일단, CSS소스에서, #sidemenu 에 대해서..
height: 100%; 를 주면, IE에서는.. 잘 표시되지만, FF에서는.. 역시 저렇게 나오네요 -_-;
어떤.. 대책 없을까요?
요즘에는.. 페이지의 레이아웃을 짤때..
테이블[table]보다는, div를 사용하라고 권고하더군요^^..
그래서, div 레이아웃 관련글도 보고 하면서 만들고 있습니다ㅜ
[CSS]파일 소스,
/* 전체 레이아웃 결정 */
body {
font-family: '굴림', '돋움', '궁서', '바탕';
font-size: 9pt;
margin: auto; /* 가운데 정렬 */
text-align: center; /* IE 5이하에서 */
}
/* 레이아웃 결정 */
#wrap {
text-align: left;
width: 800px;
margin: 30px auto;
background-color: #CCCCCC;
border: dotted 1px #999999;
}
#head {
height: 50px;
}
#middle {
background-color: #666666;
}
#sidemenu {
float: left;
width: 200px;
}
#content {
width: 597px;
}
#foot {
height: 50px;
}
[XHTML]파일 소스,
<!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">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=euc-kr" />
<linkrel="stylesheet"type="text/css"href="style_6.css" />
<title>[레이아웃_6]</title>
</head>
<body>
<divid="wrap">
<divid="head">[상단메뉴]</div>
<divid="middle">
<divid="sidemenu">[사이드메뉴]</div>
<divid="content">[내용]</div>
</div>
<divid="foot">[카피라이트]</div>
</div>
</body>
</html>
일단, 웹브라우저로 보시면 아래와 같이 나옵니다.
───────────────────────
: [상단메뉴] :
: :
───────────────────────
: [사이드메뉴] : [내용] :
───────────────────────
: [카피라이트] :
: :
───────────────────────
일단, 저기서 [내용] 이라는 부분이 경우에 따라서는 길어질수도 있잖아요?
그런데.. [내용] 이라는 부분에 문자가 많아서.. 옆으로 길어지면 저는 아래와 같이 표시하고싶은데요.
───────────────────────
: [상단메뉴] :
: :
───────────────────────
: [사이드메뉴] : [내용] ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ :
: : ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ:
: : ㅁㅁㅁㅁㅁㅁㅁㅁ :
───────────────────────
: [카피라이트] :
: :
───────────────────────
그런데, 실제로 보면.. 아래와 같이 되더군요_-;
───────────────────────
: [상단메뉴] :
: :
───────────────────────
: [사이드메뉴] : [내용] ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ :
:ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ :
:ㅁㅁㅁㅁㅁㅁㅁㅁㅁ :
───────────────────────
: [카피라이트] :
: :
───────────────────────
일단, CSS소스에서, #sidemenu 에 대해서..
height: 100%; 를 주면, IE에서는.. 잘 표시되지만, FF에서는.. 역시 저렇게 나오네요 -_-;
어떤.. 대책 없을까요?
댓글 2
-
예뜨락
2007.01.19 11:16
-
박종훈
2007.01.20 15:52
안녕하세요~ 예뜨락님 감사합니다^^..
이미 다른 분과의 대화에서 해결된 문제인데요^^;
예뜨락님의 답변과 같습니다^^..
감사합니다~
#content {
float: left;
width: 597px;
}
#foot {
clear:left;
height: 50px;
}
위와 같이 해줘보세요