jquery - 子divが固定幅でショーに表示されるときに親divを展開する方法は?

Question

子div(固定幅)がonclickで表示されているときに、親div(auto)を展開するにはどうすればよいですか?

目的: リンクをクリックすると、子 div が表示され、親 div が子 div の幅に拡張 (スケーリング) されます。子 div が親 div の外にオーバーフローしてはなりません。

ありがとう ：）

http://jsfiddle.net/aebLS/3/

JS:

$(function() {
    $('#mylink').click(function() {
        $('#mybox').show();
    });
});

HTML:

<a id="mylink" href="javascript:void(0);">SHOW BOX</a><hr />
<div class="parent">
    <div class="header">Header Content</div>
    <div id="mybox" class="child">Content</div>
</div>

CSS:

body { 
    font-family:verdana; 
    font-size:10px;
}
.parent {
    border:1px solid blue;
}
.child {
    display:none;
    width:400px;
    border:1px solid red;
    background:lightblue;
}
.header {
    width:auto;
    border:1px solid green;
}

Answer 1

働くフィドル

display: inline-block親に追加するだけです

.parent {
    border:1px solid blue;
    display: inline-block;
}

CSSから: Parent-Div はその子と共に成長しません (水平)

Answer 2

body { 
    font-family:verdana; 
    font-size:10px;
}
.parent {
    border:1px solid blue;
}
.child {
    display:none;
    position:absolute;
    width:400px;
    border:1px solid red;
    background:lightblue;
}
.header {
    width:auto;
    border:1px solid green;
}