수다닷컴

다음은 저희 수다닷컴회원이라면 다 알고 계실 css-4-column-layout-40의 소스입니다.

[html]

!doctype html public -//w3c//dtd xhtml 1.0 strict//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd
html xmlns=http://www.w3.org/1999/xhtml
head
titlecss layouts - 4 column layout - 40/title
style
* {
padding: 0;
margin: 0;
}
body {
font-family: arial, helvetica, sans-serif;
color: #666666;
font-size: 12px;
}
#wrapper {
width: 770px;
margin: 0 auto;
}
#navbar {
border: 1px solid #ccc;
margin: 0px 5px 5px 5px;
padding: 4px;
background-color: #a3a38f;
}
#header {
border: 1px solid #ccc;
margin: 5px 5px 5px 5px;
height: 70px;
padding: 10px;
background-color: #c9c9be;
}
/* ---------------------------- */
#leftcolumn1 { /* parent wrapper for inside boxes */
margin: 0 0px 5px 5px;
display: inline; /* ie hack */
width: 176px;
float: left;
min-height: 300px;
padding: 4px;
border: 1px solid #ccc;
background-color: #dac8bf;
}
* html #leftcolumn1 {height:300px} /* ie min-height hack */
#leftcolumn2 { /* parent wrapper for inside boxes */
margin: 0 5px 0px 5px;
display: inline; /* ie hack */
width: 177px;
float: left;
min-height: 300px;
padding: 4px;
border: 1px solid #ccc;
}
* html #leftcolumn2 {height:300px} /* ie min-height hack */
/* ---------------------------- */

/* ---------------------------- */
#rightcolumn1 { /* parent wrapper for inside boxes */
border: 1px solid #ccc;
margin: 0px 5px 0px 0px;
display: inline; /* ie hack */
padding: 4px;
width: 176px;
float: left;
min-height: 300px;
background-color: #dac8bf;
}
* html #rightcolumn1 {height:300px} /* ie min-height hack */
#rightcolumn2 { /* parent wrapper for inside boxes */
border: 1px solid #ccc;
margin: 0px 0px 0px 0px;
display: inline; /* ie hack */
padding: 4px;
width: 176px;
float: left;
min-height: 300px;
}
* html #rightcolumn2 {height:300px} /* ie min-height hack */
/* ---------------------------- */
#footer {
border: 1px solid #ccc;
background-color: #a3a38f;
margin: 0px 5px 5px 5px;
display: inline; /* ie hack */
padding: 4px;
float: left;
width: 750px;
}
/style
/head
body
div id=wrapper
div id=header
this is my header
/div

div id=navbar
this is my navigation bar
/div

div id=leftcolumn1this is column 1/div

div id=leftcolumn2
pthis is column 2/p
p /p
p /p
p /p
p /p
p align=center /p
p align=center /p
p align=center /p
p align=center /p
/div

div id=rightcolumn1
pthis is column 3/p
p /p
p /p
p /p
p /p
p /p
p align=center /p
p align=center /p
p align=center /p
p align=center /p
p /p
/div

div id=rightcolumn2
pthis is column 4/p
p /p
p /p
p /p
p /p
p /p
p align=center /p
p align=center /p
p align=center /p
p align=center /p
p /p
/div

div id=footer
footer
/div
/div

/body
/html

그런데 아시는대로 body의 높이는 최소 높이에 해당하고 boder처리를 하면 중간에서 짤리는 것을 쉽게 볼 수 있습니다.
느낌으로는 각각의 box를 inline처리를 해다 보니 제대로 반영이 안되는 것으로 생각듭니다.

구체적인 테스트를 하실 수 있도록 이곳에 마련해 두었습니다.
참고 :http://www.teacher114.com/jquery/cssgen/height_test.aspx

브라우저별로 높이의 값이 이상하게 다른데 ie의 경우 auto로 반환되는 대신, ie를 제외한 firefox,safari등의 경우
구체적으로 300px로 딱 지정되어 나오는 것이 저의 경우엔신기해 보입니다.

궁금한 것은 body나 form1의 id를 가진 녀석의 높이가 161px로 반환되어 나오는데
사실은 그 안에 그 보다도 높은 300px이상 되는 div들이 줄지어 있는데도 form이나 body는 반영이 안된다는
점입니다. 그래서 자동적으로 안의 최대 높이를 인식해서 높혀주는 css적인 방법에 대해 궁금합니다.

자바스크립트가 아닌 css로 처리할 수 있는 방법이 없는 걸까요?

신청하기