css질문입니다~ 채택완료

11년 전 조회 7,976
캡처.PNG
 



<style type="text/css">
#footer{width:100%; height:80px; background-color:red;position:relative;}
.footer{width:1280px; margin:0 auto;position:relative;}
.footer:after{content:"";display:block;clear:both;}
.foot_left{width:480px;float:left;}
.foot_right{width:800px;float:left;}
*{margin:0; padding:0;}
</style>

  <div id="footer">
  <div class="footer">
<div class="foot_left">푸터 레프트</div>
<div class="foot_right">푸터 라이트</div>
</div>
  </div>


이렇게 할경우에 그냥 보기엔 제대로 보이지만
브라우저의 크기를 좁힐경우 사진처럼 오른쪽에 여백이 생깁니다.
최상위 #footer의 width값을 100%로 주고 자식 .footer의 width값을 1280px에 margin:0 auto;로 주었는데..
이렇게 하면 안되나요..?
#footer와 .footer를 부모 자식관계로 하지 말고 따로 떨어트려야 하나요..?

답변 2개

채택된 답변
+20 포인트
overflow:hidden;
 
한번 줘보세요.
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

감사합니다~~^ ^

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

<style type="text/css">
.footer{width:100%; height:80px; width:1280px; margin:0 auto;position:relative;overflow:hidden; border:1px solid blue;}
.foot_left{width:478px; height:78px; float:left; border:1px solid brown;}
.foot_right{width:798px; height:78px; float:left; border:1px solid magenta;}
</style>
 
 
  <div class="footer">
<div class="foot_left">푸터 레프트</div>
<div class="foot_right">푸터 라이트</div>
</div>
 
 
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

감사합니다~~^ ^

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

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

로그인
🐛 버그신고