wrap CSS에서 전체 높이가 다 안싸여지는 건??
뿌우
[css]
* {
padding: 0;
margin: 0; border:
}
body {
font-family: arial, helvetica, sans-serif;
color: #666666;
font-size: 12px;
}
#wrapper {
width: 770px;
margin: 0 auto;
border : solid 1px red; ------- red 보더
}
#header {
border: 1px solid #ccc;
margin: 5px 5px 5px 5px;
height: 70px;
padding: 10px;
background-color: #c9c9be;
}
#navbar {
border: 1px solid #ccc;
margin: 0px 5px 5px 5px;
padding: 4px;
background-color: #a3a38f;
}
#centercolumn {
border: 1px solid #ccc;
margin: 0 5px 5px 5px;
display: inline; /* ie hack */
padding: 4px;
width: 97.4%;
float: left;
min-height: 300px;
}
* html #centercolumn {height:300px} /* ie min-height hack */
#footer {
background-color: #a3a38f;
margin: 0 5px 5px 5px;
display: inline; /* ie hack */
padding: 4px;
float: left;
width: 97.7%;
}
[html]
div id=wrapper
div id=header
this is my header
/div
div id=navbar
navigation bar
/div
div id=centercolumn
pthis column is my main content area/p
p /p
p /p
p /p
p /p
p /p
p align=center /p
p align=center /p
p align=center /p
p /p
/div
div id=footerfooter/div
/div
수다님들이 올려 놓으신 샘플 중에 1column의 css-1-column-layout-34을 보고 있습니다.
wrap 클래스에 height를 주지 않았으니 아마 auto로 잡히겠지요?
문제는 centercolumn클래스에서 높이가 일정하지 않다는데 문제가 있습니다.
그럼에도 불구하고 wrap의 보더가 작동되어 전체모두를 red 로 하고 싶을 때 고수님들께서는
어떻게 처리하시는지요?
-
화가마
2. wrapper 다음에 나오는 녀석에게 clear:both를 주는 방법
- 가장 깔끔한 방법.. 그러나 그 다음에 나오는 녀석이 없다면 비어있는 div 같은 코드를 넣어
줘야 하는 문제...
3. wrapper 자체에 float: left를 추가하는 방법
- wrapper 하위에 나오는게 없을때는 문제 없지만... 만약 있다면 그 다음에 나오는 엘리먼트에서
clear:both를 시켜 줘야함...
4. wrapper에 -
도널드
위와 같은 현상이 생기는 이유를 알으셔야 되겠네요....
float:left (right) 를 주게 되면 그 float된 녀석은 공중에 붕 뜨게 됩니다...
이게 무슨 말인고 허니... div id=\wrapper\div id=\con\/div/div
라는 코드가 있을때 #con { float: left; } 를 주게 되면 이녀석은 공중에 붕 뜨기 때문에
부모인 wrapper는 자식인 con의 사이즈를 알수가 없습니다....
따라서 wrapper 라는 -
후회중
제이쿼수다님... 감사.. 그렇군요... css는 수수께기 같아서 알고 나면 그렇군! 하는데 그 전까지는 골머리를 싸잡아 매야 하니...ㅎㅎ
-
한봄찬
#wrapper 에 overflow:hidden; 주면 되지않나요 ?
저도 초보라 요정도 밖에는 ..; -
새밝
footer는 이 레이아웃이라면 clear가 더 좋지 않을까 해요^^