CSS float left and position elements

Question

I have problem with float left , i use container widt 900px of size and inside have the elements for show 4 elements by line , the structure no give me problem , but if i use diferent height in one element , the element under no show right , i put my css

<style>

#container
{
position:relative;
width:900px;
min-height:150px;
height:auto;
margin:auto;
overflow:hidden;    
}


#elements
{
float:left;
width:170px;
min-height:150px;
height:auto;
background-color:red;
margin-right:5px;
margin-bottom:5px;  
}



</style>


<div id="container">

<div id="elements">element inside<br>element inside<br>element inside<br>element inside<br>element inside<br>element inside<br>element inside<br>element inside<br>element inside<br></div>
<div id="elements"></div>
<div id="elements"></div>
<div id="elements"></div>
<div id="elements"></div>
<div id="elements"></div>


</div>

You can see in Fiddle

Answer 1

first of all an ID name is only allowed once per page. I suggest you change #elements to .elements, use a class instead. Your container is 900 pixels wide whilst the sum of each div#elements is 1050px.

#container
{
position:relative;
width:925px;
min-height:150px;
height:auto;
margin:auto;
overflow:hidden;    
}


.elements
{
float:left;
width:150px;
min-height:150px;
height:auto;
background-color:red;
margin-right:5px;
margin-bottom:5px;  
}

.elements:last-child{
margin-right:0;
}

Answer 2

As you are using a set width container with fixed width boxes, you can use the following style to fix your problem:

.elements:nth-child(5n+1)
{
    clear:left;
}

Example

Please note I have changed your ids to a class as ids should be unique