Parent Div Needs to extend with Multiple Children

Question

My parent Div needs to extend with all the children. The children divs are multiple buttons that's x position is incremental.

Example

div id="Parent"
  div id="Child" /div {X-position : 90}
  div id="Child2" /div {X-position : 180}
/div

Any Ideas will be much appreciated

Answer 1

You can do it by setting the display: inline-block; or display: table; to the parent div, and then it will fit the size of its children:

.Parent{
    background-color:red;
    display:inline-block;
    /* display: table;*/
}

.Child{
    background-color:blue;
    width:50px;
    heigth:50px;
}

You can see the demo here:

.parent{
    background-color:red;
    display:table;
}

.child{
    background-color:blue;
    width:50px;
    height:50px;
}

<div class="parent">
    <div class="child">bbb</div>
    <div class="child">aaa</div>
    <div class="child">bbb</div>
    <div class="child">aaa</div>
    <div class="child">bbb</div>
    <div class="child">aaa</div> 
</div>