div padding 문제입니다. 부모레이어를 벗어나지 못하게 할수 없을까요?

div padding 문제입니다. 부모레이어를 벗어나지 못하게 할수 없을까요?

QA

div padding 문제입니다. 부모레이어를 벗어나지 못하게 할수 없을까요?

본문


#ad_bo_m  { position: relative; width:100%; height:1000px; background:#ffffff;}
#ad_bo_m_l  { position: absolute; width:70%; height:700px; left:0%; background:#f4f4f4;}
#ad_bo_m_r  { position: absolute; width:30%; height:700px; left:70%; padding:20px; background:#ffff00;}

 

위 상태인데요

#ad_bo_m_r 부분에 padding을 20px 주니 부모영역(#ad_bo_m) 을 벗어나서 20px+20px 옆으로

튀어나와 버립니다.

 

width 값이 px이라면 margin-left 로 조정 가능하겠는데

#ad_bo_m_l 과 #ad_bo_m_r 은 서로 7:3 정도 비율로 움직이게 해놔서요..

 

div 내부 여백이 padding 이라고 알고 있는데요

이 내부 여백값을 아무리 줘도 해당 div의 전체 width 가

늘어나지 않는 방법이 없을까요?

 

 

이 질문에 댓글 쓰기 :

답변 2

http://blog.freezner.com/archives/791

 

참고해보세요~ 

필요하신 분들을 위한 해결방법입니다.

 

이 방법은 CSS3에서 지원되는 내용입니다.
div_A라는 요소의 width 속성이 100%이고, 여기서 150픽셀만큼 빼고 싶은 경우를 가정하겠습니다.
예전같았으면 자바스크립트를 이용해 100%로 설정된 width의 실제 픽셀수치를 구한 후에 150픽셀을 빼는 방법을 사용했습니다. 한마디로 번거로웠죠.
하지만 CSS3가 많이 사용되고 있는 현재, 그런 번거로운 작업을 하지 않으셔도 됩니다.


#div_A {width:calc(100% - 150px);}

위 처럼 한줄이면 됩니다. calc라는 함수인데요. 이름만 들어도 알 수 있듯 수치를 계산해줍니다. 상이한 단위와 상관없이 말이죠.
예제에서는 %와 px간의 계산이었지만 em, pt, mm 등등 css에서 사용되는 모든 단위를 사용할 수 있습니다.
연산 또한 빼기(-) 뿐만이 아니라 더하기(+), 곱하기(*), 나누기(/)도 가능합니다.

 

출처 :  

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

회원로그인

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