Question

I have one div element where I have all articles. The articles itself are div-elements.

<div id='articleContainer'>
    <div class='article'></div>
    <div class='article'></div>
    <div class='article'></div>
</div>

Here is the css for aritcleContainer

#articleContainer{
    position: relative;
    float:left;
    width: 600px;
    min-height: 600px;
    padding: 50px;
}

What’s the least condition for it to expand as I add new articles? This example works but I just want to know the condition for it to expand for itself. There are other examples that do not expand for itself. Where I don’t have a clue at all.

Answer 1

If the article elements are not floating elements, the contain will resize to contain them.

If the articles elements are floating elements, they will not affect the size of the container. You can add an overflow setting to the container to make it contain floating children:

#articleContainer{
    position: relative;
    float:left;
    width: 600px;
    min-height: 600px;
    padding: 50px;
    overflow: hidden;
}

Note that the overflow setting will not hide anything (unless you make the articles wider than 600 pixels), it’s just used to change how the children are contained inside the element.