CODEWITHSUNDEEP
htmlcss
barbajoe
barbajoe

Reputation: 547

Container match children AND grandchildren width

I have a container that has many children and grandchildren. My goal is to have the container's width match it's children/grandchildren. (CSS at the bottom)

The easy version looks like this, a parent with some children and it grows/shrinks dependent on the children: http://jsfiddle.net/6qWg6/5/

<div id="container">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>
</div>

The difficulty arises when I add grandchildren: http://jsfiddle.net/6qWg6/4/

<div id="container">

    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>

    <div id="child_container">
        <div class="child">child 1</div>
        <div class="child">child 2</div>
        <div class="child">child 3</div>
        <div class="child">child 4</div>
        <div class="child">child 5</div>
        <div class="child">child 7</div>
        <div class="child">child 8</div>
        <div class="child">child 9</div>
        <div class="child">child 10</div>
    </div>

</div>

When I add grandchildren the container goes to a width of 100%, which I don't want. How can I add grandchildren while still having my containers width match it's descendants? 

#container {
    float: left;
    border: 1px solid blue;
    display: inline-block;
    padding: 5px; 
}

#child_container {
    float: left;
    border: 1px solid red;
    padding: 5px; 
}

.child {
    width: 100px;
    float: left;
    border: 1px solid black;
}

Upvotes: 0

Views: 231

Answers (1)

Pinki
Pinki

Reputation: 1042

There you go, I updated your fiddle

http://jsfiddle.net/6qWg6/7/

CSS

#container {
    float: left;
    border: 1px solid blue;
    display: inline;
    padding: 5px; 
}

#child_container {
    display: inline;
}

.child {
    width: 100px;
    float: left;
    border: 1px solid black;
    display: table-cell;
}

HTML

<div id="container">

    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>

    <div id="child_container">
        <div class="child">child 1</div>
        <div class="child">child 2</div>
        <div class="child">child 3</div>
        <div class="child">child 4</div>
        <div class="child">child 5</div>
        <div class="child">child 7</div>
        <div class="child">child 8</div>
        <div class="child">child 9</div>
        <div class="child">child 10</div>
    </div>

</div>

Upvotes: 1

Related Questions