Question

Remember:
Imagine the behavior on the screen of those elements: <div> with style float: left; height: 100px; width: 100px when there is more then 100 on the screen. When you resize your window to the low width: divs will being pushed down

Example
http://1lj.net/ex2.html

What I need:
I need the child divs to act like the linked example, the problem is that they are in a fixed width container. eg. <div class=container style="width:800px">

How to get this behaviour?

sorry for my english, its really hard to write on not native language.

Answer 1

You need two containers. One container is for the max width, the other is to hold the boxes.

CSS:

.container
{
    height:auto;
    max-width: 800px;
    margin: 0 auto;
    background-color: #666666;
}

.containercontent {
    position: relative;
    width: auto;
    margin: 0 auto;
}

HTML:

<div class="container"> <!-- Add this container -->
<div class="containercontent">

<h2>Lalalalal.</h2>

<div class="box" id=box1></div>
<div class="box" id=box2></div>
<div class="box" id=box3></div>
<div class=box id=box4></div>
<div class=box id=box5></div>
<div class=box id=box6></div>
<div class=box id=box7></div>
<div class=box id=box8></div>
<div class=box id=box9></div>
<div class=box id=box10></div>
<div class=box id=box11></div>
<div class=box id=box12></div>
<div class=box id=box13></div>
<div class=box id=box14></div>
<div class=box id=box15></div>
<div class=box id=box16></div>
<div class=box id=box17></div>
<div class=box id=box18></div>
<div class=box id=box19></div>
<div class=box id=box20></div>

</div>
<div class="clean"></div>
</div>