table을 div로 변환 중 막혔습니다.ㅜㅜ

min3nice · Post by **min3nice** » 2005 11 18 21:12 58

실용예제로 배우는 웹표준이란 책을 읽고
table대신에 css로 레이아웃을 잡으려고 하는데요..
여기서 막힌건 footer부가 contents의 내용이 짧건 길건 항상 브라우저 맨 밑 받닥에 놓고 싶습니다..
소스는 현재
-- HTML --
<body>
<div id='container'>
<div id='header'></div>
<div id='sideleft'></div>
<div id='sideright'></div>
<div id='content'></div>
<div id='footer'></div>
</div>

-- style --
BODY {
MARGIN: 0px;
PADDING : 0px;
TEXT-ALIGN: center;
font-size : 9pt;
font-family : 굴림;
}

#container
{
MARGIN: 0px auto;
WIDTH: 990px;
TEXT-ALIGN: left;
}

#Hearder {
WIDTH: 990px
}

#SideLeft {
FLOAT: left; WIDTH: 180px;
}
#SideRight {
PADDING-LEFT:10px;
FLOAT: left; WIDTH: 160px;
}

#Content
{
PADDING-LEFT:10px;
FLOAT: left;
WIDTH: 650px;
}

#Footer
{
clear : both;
bottom : 0;
WIDTH: 990px;
position : absolute;
}

이렇게 되어있고요.
그냥 기본 적인 화면에선 footer부가 바닥으로 깔려 나오지만..
내용의 길이가 늘어날때 마다 content부의 바닥쪽에서 가려버립니다.

content부의 내용이 길어지면
다시 Footer부의 속성을 position : static으로 덮어쓰여 해결하였지만
게시판의 글보기일경우 내용이 길수도 짧을 수도 있는데
이럴경우 어떻게 해야 할까요..?
ㅠㅠ

좋은 해결 방법 좀 알려 주시면 감사하겠습니다. 좋은 밤 되세요^^

freshworks · Post by **freshworks** » 2005 11 19 06:12 00

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<meta http-equiv="content-language" content="ko-KR" />
<title>3-Column Layout</title> 

<style type="text/css" media="screen">
body {
	margin: 0;
	padding : 0;
	font-size : 0.75em;
	font-family : 굴림, Gulim;
}
#container {
	width: 700px;
	margin: 0 auto;
	text-align: center;
}
#header {
	width: 700px;
	height: 100px;
	background: red;
}
#sideleft {
	float: left;
	width: 100px;
	height: 300px;
	background: blue;
}
#sideright {
	float: left;
	width: 100px;
	height: 300px;
	background: blue;
}
#content {
	float: left;
	width: 480px;
	height: 400px;
	margin-left: 10px;
	margin-right: 10px;
	background: yellow;
}
#footer {
	clear : both;
	width: 700px;
	height: 100px;
	position : relative;
	background: green;
}
</style>
</head>

<body>
<div id="container">
	<div id="header">Header</div>
	<div id="sideleft">Left</div>
	<div id="content">Content</div>
	<div id="sideright">Right</div>
	<div id="footer">Footer</div>
</div>
</body>
</html>

일몰님의 XHTML, CSS 배우기 링크

어느 초보 · Post by **어느 초보** » 2005 11 19 13:47 20

윗분의 방법대로 하면 content 영역의 내용이 길어질 경우 내용의 일부가
footer 에 의해 가려집니다.

content 에 overflow : auto 속성을 주면 내용이 길어져도 content 의 세로 길이가
일정하게 유지 됩니다...

Post by **hyeonseok** » 2005 11 19 17:14 13

http://hyeonseok.com/home/archive_css.p ... ightLayout
이글 참고 하세요.

freshworks · Post by **freshworks** » 2005 11 19 17:37 45

어느 초보 wrote:윗분의 방법대로 하면 content 영역의 내용이 길어질 경우 내용의 일부가
footer 에 의해 가려집니다.

content 에 overflow : auto 속성을 주면 내용이 길어져도 content 의 세로 길이가
일정하게 유지 됩니다...

content에 임의로 height를 지정해줬기 때문에 내용을 길게 넣어주면 footer에 가려지게 됩니다.

min3nice wrote:footer부가 contents의 내용이 짧건 길건 항상 브라우저 맨 밑 받닥에 놓고 싶습니다..

min3nice님의 질문하신 내용은 현석님의 링크를 참고하시는게 좋겠네요.

min3nice · Post by **min3nice** » 2005 11 23 16:36 33

생업에 쫓겨 본의 아니게^^;;
이제야 감사의 글을 적습니다.
freshworks님, hyeonseok님 그리고 어느 초보님께
감사의 마음을 전합니다. 덕분에 잘 해결했습니다.
다시 한번 감사드립니다
좋은 하루 보내세요^^

Mozilla 한국 커뮤니티

table을 div로 변환 중 막혔습니다.ㅜㅜ

table을 div로 변환 중 막혔습니다.ㅜㅜ

감사합니다.

Who is online