How to expand parent div when child div appears on show with fixed width?

0
votes

How can I expand the parent div(auto) when the child div(fixed width) is shown onclick?

Objective: When I click the link, the child div will appear and the parent div should expand(scale) to the width of the child div. The child div should not overflow outside of the parent div.

Thanks :)

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;
}
3
jqueryhtmlcss
You want to expand it to how big? in your example it is already wider than the child, do you want to add on the width of the child to the already wide parent? - DGS
you could do something like this - Pete
@DGS: I want to expand it to the width of the child div so it will scale its width and not overflow outside of the parent div. - marknt15
Might be best to add an image showing the actual problem you are having. - DGS

3 Answers

0
votes
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;
}
0
votes

Working Fiddle

Just need to add display: inline-block to the parent

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

From CSS: Parent-Div does not grow with it's children (horizontal)

-1
votes

Change your div place and show result.

Like this,

<div class="parent">
    <div class="header">Header Content
        <div id="mybox" class="child">Content</div></div>
</div>

DEMO