how to make the parent width equals the width of all element inside it?

Question

Hello

my CSS code

.child{
    width:100px;
    height:100px;
    display:inline-block;
}

my HTML code

<div id="parent">
    <div class="child">
    </div>
    <div class="child">
    </div>
</div>

the .parent width will be 100%,but i want to make the parent width equals exactly the some of all childs, but i don't know how many child i will have and i don't know the width of each one

what is the easiest way to do that using CSS AND/OR Jquery ?

Answer 1

You can float .parent or display it inline.

Answer 2

$(document).ready(function(){
    var sumwidth=0;
    $("#parent").children().each(function() {
        var child = $(this);
        sumwidth+=child.width();
    });
    $("#parent").width(sumwidth);
});