table을 div로 변환 중 막혔습니다.ㅜㅜ
Posted: 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으로 덮어쓰여 해결하였지만
게시판의 글보기일경우 내용이 길수도 짧을 수도 있는데
이럴경우 어떻게 해야 할까요..?
ㅠㅠ
좋은 해결 방법 좀 알려 주시면 감사하겠습니다. 좋은 밤 되세요^^
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으로 덮어쓰여 해결하였지만
게시판의 글보기일경우 내용이 길수도 짧을 수도 있는데
이럴경우 어떻게 해야 할까요..?
ㅠㅠ
좋은 해결 방법 좀 알려 주시면 감사하겠습니다. 좋은 밤 되세요^^