본문 3칸 질문 다시요.
본문
제가 한 지난 문의글에 sinbi님께서 답변으로 css 공부 하라고 하신.. ^^ 그래서 보면서 css 수정하고 하면서,
본문 3칸은 해냈는데요. ㅠ.ㅠ
포지션 문제인지.. 도대체가 모르겠어서요. ㅠ.ㅠ
머리가 너무 안돌아가요. ㅠ.ㅠ
첨부한 이미지를 크게 해서 봐주세요.
이렇게 3칸 완성은 했는데요.
가운데 콘텐츠 부분이 맨 위로 나와서, tail.php 의 회사소개 등등의 메뉴를 가려요.
default.css 에서 이 부분을 이렇게 정의했거든요.
aside 는 아웃로그인 / 가운데 콘텐츠 / bside 는 맨 오른쪽 서브
#aside {float:left;width:265px;padding:0;height: 100%;border: 0px solid #adbfd2;margin:20px 20px 20px 0}
#bside {float:right;width:140px;padding:0;height: 100%;border: 0px solid #adbfd2;margin:20px 30px 20px 0}
#container {z-index:4;position:absolute;float:left;min-height:500px;height:auto !important;margin:20px 160px 20px 285px;height:500px;font-size:1em;width:755px;zoom:1}
container 의 position 을 relative 로 변경하면,
맨 왼쪽은 맨 아래로, 그 다음 중간, 맨 오른쪽 서브가 맨 위로.. 이렇게 단계적으로 나와 버려요.
그래서, absolute 로 변경했더니, 사진처럼 나오기는 했는데요.
콘텐츠 부분이 tail.php의 메뉴를 가려버려서요.. ㅠ.ㅠ
혹시 무엇이 잘못된 부분인지 알려 주세요.. 하루종일 머리 아프게 고민하다 올려 봅니다..
답변 3
aside, bside, container 세개의 박스를 감싸는 부모 컨테이너를 만드시고 overflow:hidden; 적용한번 해보세요
https://codepen.io/sinbi/pen/ExaaYeV (상자 X)
https://codepen.io/sinbi/pen/JjooPaK (상자 O)
https://codepen.io/sinbi/pen/gObbYdv (상자 O)
https://codepen.io/sinbi/pen/MWYYgqN (상자 O)
https://homzzang.com/b/css-115 (맨 하단쪽 참고)
저런 경우 보통 DIV 가 닫히지 안거나
상위 DIV CSS 에 높이 값이 잇거나 하는 경우나
해결 방법은 그냥 크롭같은 브라우저에서 소스보기를 해서 전체소스를 보면 서 수정 해보세요
