css 질문입니다.

css 질문입니다.

QA

css 질문입니다.

본문

44c6a6bf46e1c45950f78bbc9a2d1db3_1450313045_3073.png
 

컨테이너가 aside 옆으로 붙었으면 좋겠습니다. 

컨테이너의 css 에서 float:left 속성을 주면 하단에 있는 정보부분도 붙게 됩니다. float:right 속성을 주어도 마찬가지입니다. 

이 질문에 댓글 쓰기 :

답변 5

#ft 는 clear:both 를 주는게 맞구요.

레이아웃 구성이 각각 다 다른가요? 

이건 레이아웃을 다시 생각해보시는게 나으실거 같은데요 ;

우선 소스가 난잡해서 더 보기 어려울거 같아요

컨테이너 안에 컨테이너도 보이고 

바디 안에 스타일 시트가 보이고

 

컨테이너 width +  aside width 가 두개를 감싸고있는 div의 width 보다 크면 발생하는 문제입니다. 

감싸고 있는 div의 width 를 조정하시거나 컨테이너 width , aside width 를 조정하시면됩니다.

#wrapper{z-index:5;width:100%; min-width:1200px;zoom:1;margin:0 auto; border:#093 3px solid}
#wrapper_container {width:1200px; margin:0 auto; border:#093 solid 3px; padding-top:15px}

#container{width:900px; min-height:500px; /*position:relative; float:left;*/;}
#aside {float: left;width:220px;margin:0px 30px 0 30px; /*border: 1px solid #e3e3e3;*/border-bottom: 0;}

전체를 잡아줄 수 있는 div에 #wrapper 을 주었고, 가운데 정렬을 위해서 div를 만들어서 #wrapper_container 을 주었습니다. 전체 div에 width를 100%주었고 가운데 div에 1200px 을 주었습니다. 그리고 좌측 메뉴를 위해서 div를 만들어 #aside라는 이름을 주었고, width는 200 우측 margin을 50, 좌측을 30을 줬습니다. 그리고 가운데 내용을 위해서 div를 만들어 #container을 주고 width를 900을 주었습니다.

200+50+30+900 이므로 width는 정확히 1200이 나오는데, 정렬이 되지 않습니다.

그래서 우측 margin을 30으로 주어서 1180이 나오도록 해봐도 여전히 정렬이 되지 않습니다.

clear:both 해보세요.

아래 카피라이트를 감싸는 div에 clear:both 를 하시면 됩니다.

예) #ft {clear:both;}





#container {
    width: 900px;
    min-height: 500px;
    border: #0F0 3px solid;
    /* clear: both; */
    float: left;
}



아래 링크 참조해서 개발자도구로 돌려봤습니다.

http://3004ch.db21.net/bbs/content.php?co_id=ministry_mission

가운데 내용이 wrapper 을 벗어나게 됩니다.

그래서 tail 의 내용이 수직정렬이 되지 않습니다.

저는 tail 부분에 border-top, margin-top, padding-top 을 주어서 여백을 만들고 싶습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 60
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT