3단 레이아웃 구조 좌우 높이를 가운데와 동일하게 줄려면 어떻게 해야하나요?
뽀글이
style type=text/css
html,
body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
#body {
width:960px;
margin:0 auto;
background:#ddd;
}
#header {
background:#fdd;
}
#content-1 {
float:left;
width:220px;
padding:10px;
background:#bfb;
}
#content-2 {
float:right;
width:720px;
}
#content-2-1 {
float:left;
width:460px;
padding:10px;
background:#ddf;
}
#content-2-2 {
float:right;
width:220px;
padding:10px;
background:#dff;
}
#footer {
background:#ff9;
}
/style
div id=body
div id=header/div
div id=main
div id=content-1000/div
div id=content-2
div id=content-2-1동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.
남산 위에 저 소나무 철갑을 두른듯 바람 서리 불변함은 우리 기상일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.
가을 하늘 공활한데 높고 구름없이 밝은 달은 우리가슴 일편 단심일세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.
이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세./div
div id=content-2-2000/div
/div
/div
div id=footer/div
/div위 코드처럼 3단 레이아웃 구조를 마크업했는데요..
좌우가 가은데 text 길이만큼 높이가 길어지게 할려면 어떻게 해야하나요? text도 vertical-align:middle을 주고싶은데 적용이 되지 않아요.. 가운데 text 길이에 다라 높이와 세로 middle정렬을 줄려면 어떻게 해야하나요?
고수님들 부탁드려요..