테스트 사이트 - 개발 중인 베타 버전입니다

css 질문입니다. 채택완료

muzluv 9년 전 조회 5,186


 

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

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

댓글을 작성하려면 로그인이 필요합니다.

답변 5개

채택된 답변
+20 포인트
p
9년 전

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

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

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

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

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

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

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

m
muzluv
9년 전
아.. 제가 #ft 에 clear:both를 주지 않았습니다... 위에 글에 주라고 하셨는데, 안했네요. 이거 주니까 해결 되었습니다. 정말 감사드립니다.
m
muzluv
9년 전
정말 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

p
9년 전

</span></span></p><p><font color="#222222" face="Menlo, monospace"><span style="font-size: 11px; line-height: normal;">
</span></font></p><p><font color="#222222" face="Menlo, monospace"><span style="font-size: 11px; line-height: normal;">#container {</span></font></p><p><font color="#222222" face="Menlo, monospace"><span style="font-size: 11px; line-height: normal;">    width: 900px;</span></font></p><p><font color="#222222" face="Menlo, monospace"><span style="font-size: 11px; line-height: normal;">    min-height: 500px;</span></font></p><p><font color="#222222" face="Menlo, monospace"><span style="font-size: 11px; line-height: normal;">    border: #0F0 3px solid;</span></font></p><p><font color="#222222" face="Menlo, monospace"><span style="font-size: 11px; line-height: normal;">    /* clear: both; */</span></font></p><p><font color="#222222" face="Menlo, monospace"><span style="font-size: 11px; line-height: normal;">    float: left;</span></font></p><p><font color="#222222" face="Menlo, monospace"><span style="font-size: 11px; line-height: normal;">}</span></font></p></div></div><div style="min-width: 0px; min-height: 0px; box-sizing: border-box; color: rgb(48, 57, 66); font-family: Menlo, monospace; font-size: 11px; line-height: normal; white-space: nowrap;">

아래 링크 참조해서 개발자도구로 돌려봤습니다.
로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

m
muzluv
9년 전
http://3004ch.db21.net/bbs/content.php?co_id=ministry_mission

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

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

저는 tail 부분에 border-top, margin-top, padding-top 을 주어서 여백을 만들고 싶습니다.
m
muzluv
9년 전
제가 아직 배운지 얼마 안되서....;;; 제대로 배운적도 없어서 소스가 많이 지저분합니다...

정말 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

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

예) #ft {clear:both;}

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

m
muzluv
9년 전
http://3004ch.db21.net/bbs/content.php?co_id=church_greeting

이렇게 되었습니다.
m
muzluv
9년 전
각각의 div에 border 주었습니다. 그런데 좌측으로 정렬이 되지 않습니다.

댓글을 작성하려면 로그인이 필요합니다.

p
9년 전
clear:both 해보세요.
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

m
muzluv
9년 전
어느 div에 주어야 하나요?

댓글을 작성하려면 로그인이 필요합니다.

9년 전

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

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

m
muzluv
9년 전
#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이 나오도록 해봐도 여전히 정렬이 되지 않습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인