CODEWITHSUNDEEP
jqueryhtmljquery-uicss
Victorio Berra
Victorio Berra

Reputation: 3125

How do I allow my parent container be responsive and increase its height when its floated child grows?

Here is the fiddle http://jsfiddle.net/C5X44/2/

As you can see the red should be behind all the children since they are floating they wont allow the div behind to see them and then expand.

I have an "add item" button to show that I can not possibly give a fixed with as I have no way of knowing how many elements I will need to add. Other than using Javascript to manually add on pixels to a selected class when a new row is formed I am out of ideas.

Code:

<div class="container">
    <button id="addItemBtn" type="button">Add Item</button>

    <div id="sortable-container">
        <ul id="sortable">
            <li class="ui-state-default">1</li>
            <li class="ui-state-default">2</li>
            <li class="ui-state-default">3</li>
            <li class="ui-state-default">4</li>
            <li class="ui-state-default">5</li>
            <li class="ui-state-default">6</li>
            <li class="ui-state-default">7</li>
            <li class="ui-state-default">8</li>
            <li class="ui-state-default">9</li>
            <li class="ui-state-default">10</li>
            <li class="ui-state-default">11</li>
            <li class="ui-state-default">12</li>
        </ul>
    </div>
</div>

.container{
    background-color:red;
} 

#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0; 
    width: 450px; 
}

#sortable li {
    margin: 3px 3px 3px 0;
    padding: 1px; float: left;
    width: 100px; height: 90px;
    font-size: 4em;
    text-align: center;
} 


    $(function() {   

        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();          

        $( "#addItemBtn" ).click( function(){

        var item = $( "#sortable" ).find("li").first().clone(true);         
        item.appendTo($( "#sortable" ))

    });

});

Upvotes: 1

Views: 125

Answers (2)

Skrivener
Skrivener

Reputation: 1033

Add overflow: hidden; to your .container css. To clarify, containers will collapse when their children are floated, using overflow: hidden; (without setting a height value) will allow the container to self-clear the floated elements.

updated fiddle

Upvotes: 4

Nico O
Nico O

Reputation: 14142

Classic Floating behaviour.

You can add this to the container (compass pie-clearfix)

.container:after
{
    content: "";
    display: table;
    clear: both;
}

http://jsfiddle.net/C5X44/3/

Upvotes: 1

Related Questions