float 된 div를 포함한 div의 백그라운드가 안 보일때, float된 div 높이가 브라우저에 인식 안될때 clear해주는 방법

IT,인터넷,컴퓨터/CSS 2010/01/26 15:14
<div class="A">
   <div class="B"></div>
   <div class="C"></div>
</div>

위와 같이 상황에서 B,C를 각각 float:left; float:right; 를 시켰을 때
A에 적용한 백그라운드가 안보인다.
왜냐면 A 영역의 높이가 0px 되어 버리기 때문이다.

그 문제를 해결하기 위해 고민하다가 알아냈다..!!!

A에 overflow:auto; 해준다.

도움받은곳 : http://dailylog.tistory.com/19
저작자 표시 비영리 변경 금지
이올린에 북마크하기(0) 이올린에 추천하기(0)
크리에이티브 커먼즈 라이선스
Creative Commons License

'IT,인터넷,컴퓨터 > CSS' 카테고리의 다른 글

header 있고 body 있을때 body가 100% 높이 유지하도록  (0) 2010/03/09
E:first-child, E:lang(c) 유용한 몇가지 CSS  (0) 2010/01/26
float 된 div를 포함한 div의 백그라운드가 안 보일때, float된 div 높이가 브라우저에 인식 안될때 clear해주는 방법  (4) 2010/01/26
이미지 로딩이 필요없는 마우스오버 버튼 만들기  (0) 2010/01/25
IE8에서 이미지 사이의 여백 생기는 문제  (2) 2010/01/15
스크롤바 관련 CSS  (0) 2009/10/20
Posted by 주오때
TAG , ,
트랙백 0개, 댓글 4개가 달렸습니다

댓글을 달아 주세요

  1. 이럴수가 2010/02/04 17:58  댓글주소  수정/삭제  댓글쓰기

    도움이 많이 되었어요 고민이 됬었는데.
    감사합니다.
    float:left 높이 로 네이버 검색하니깐 나오네영

    • 주오때 2010/02/05 08:19  댓글주소  수정/삭제

      ^^ 감사합니다. 이럴수가님...
      auto로 했을때, 스크롤이 생기는 경우도 있으니 상황에 맞게 잘 사용하시면 될거 같습니다.^^

  2. 데미나인 2010/02/23 21:58  댓글주소  수정/삭제  댓글쓰기

    <div class="A">
    <div class="B"></div>
    <div class="C"></div>
    </div>
    <div class="D">
    </div>
    D에 clear:both; 해주어도 될거에요.

    • 주오때 2010/02/24 08:24  댓글주소  수정/삭제

      <div class="A">
      <div class="B"></div>
      <div class="C"></div>
      <div class="D"></div>
      </div>
      혹, 이렇게 해서 D를 clear 시켜주는거 말씀이신게 아닌지요..^^ 제 생각엔 D가 A안에 들어있어야 적용이 될거 같습니다^^ 저도 평소에 그런 방법을 주로 쓰구요..ㅎㅎ 좋은 글 감사합니다.~!