htmlcssdisplayhtml4

Parent Div Needs to extend with Multiple Children


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


Solution

  • 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>