팀교육 : 인접 컨텐츠에 맞춰 늘어나는 div, div 안에서 세로 중앙정렬되는 컨텐츠

Style

div.wrap {width:600px; *zoom:1}

div.wrap:after {content:""; clear:both; display:block}

div.wrap .left {width:300px; float:left}

div.wrap .right {width:250px; float:right; border:5px solid #666666; padding:10px; position:relative}

div.wrap .right p {line-height:16px}

div.wrap .right.js_on {padding:0 10px}

div.wrap .right.js_on p {position:absolute}

Javascript

jQuery(function(){

$(".wrap .right").addClass("js_on");

var vArea = $(".wrap .right"); //오른쪽 영역 변수 저장

var rightH = $(".wrap .left").height() - 10; //왼쪽 영역 높이에서 보더 넓이를 빼서 변수로 저장

vArea.css("height",rightH); // 오른쪽 영역 높이를 재정의

var vMiddle = $(".wrap .right p"); //오른쪽 영역의 컨텐츠 영역을 변수로 저장

var vMiddleH = $(".wrap .right p").height(); // 오른쪽 영역 높이를 변수로 저장

var vMiddleTop = (rightH - vMiddleH )/2; //오른쪽 영역 넓이에서 컨텐츠 영역 높이를 빼고 2로 나눠 컨텐츠 영역 top 포지션 구함;

vMiddle.css("top", vMiddleTop + "px"); //오른쪽 영역 컨텐츠 포지션 재정의

//alert(leftH);

});

html

</div>

</div>

Practice Makes Perfect!