div container-product do not include other divs who are children

To be specific, this is a HTML and CSS problem.

/* Pocetak #container-product */
#container-product{
	padding:0 10px;
}

.kategorije{
	margin-bottom:10px;
	padding:0;
}

.kategorije h2{
	text-align:center;
	text-decoration:underline;
	font-style:italic;
}
/* Pocetak #sidemenu */

h3{
	margin:0;
	padding:0;
	font-size:17px;
	font-weight:bold;
}

#sidemenu{
	float:left;
	width:240px;
}

#sidemenu-kategorije{
	margin:0;
	padding:0;
	font-size:15px;
	font-weight:bold;
}

#sidemenu-kategorije ul{
	margin:0;
	padding:0;
	list-style:none;
}

#sidemenu-kategorije li{
	margin:0;
	padding-bottom:10px;
}

#sidemenu-kategorije li a{
	text-decoration:none;
	color:#0A13B8;
}

#sidemenu-kategorije li a:hover{
	font-size:20px;
	text-decoration:underline;
	color:#000000;
}

/* Kraj #sidemenu */
/*  Pocetak #content  */
#content{
	float:right;
	width:690px;
	padding:0;
}

.product1, .product2, .product3{
	float:left;
	width:165px;
	margin:0;
	padding:0 5px;
}

.product4{
	float:right;
	width:165px;
	margin:0;
}

.product-img{
	float:left;
	display:block;
	text-align:center;
	overflow:hidden;
}

.product-grupa{
	/*border:1px solid;*/ 
	padding:0 10px;
	text-align:center
}

.product-grupa a{
	text-decoration:none;	
	color:#0A13B8;
}

.product-grupa a:hover{
	text-decoration:underline;
	color:#000000;
}

.clear{
	clear: both;
	width: 100%;
	height: 15px;
	overflow: hidden;
}

/*  Kraj #content  */
/* Kraj #container-product */

<div id="container-product"> <!-- Pocetak #container-product -->
    	<div class="kategorije">
        	<h2>KATEGORIJE PROIZVODA</h2>
        </div>
		
    	<div id="sidemenu"><!-- Pocetak #sidemenu -->
        	<div id="sidemenu-kategorije">
            	<ul>
                	<li><a href="#"><h3>RASVETA</h3></a></li>
                    <li><a href="#"><h3>LED RASVETA</h3></a></li>
                    <li><a href="#"><h3>KANALICE</h3></a></li>
                    <li><a href="#"><h3>OSIGURACI</h3></a></li>
                    <li><a href="#"><h3>MERNI INSTRUMENTI</h3></a></li>
                    <li><a href="#"><h3>GALANTERIJA</h3></a></li>
                    <li><a href="#"><h3>KLEME</h3></a></li>
                    <li><a href="#"><h3>DELOVI ZA VEŠ MAŠINE</h3></a></li>
                    <li><a href="#"><h3>DELOVI ZA BOJLERE</h3></a></li>
                    <li><a href="#"><h3>VENTILATORI</h3></a></li>
                </ul>
            </div>
    	</div><!-- Kraj #sidemenu --> 
		
    	<div id="content"><!-- Pocetak #content -->
		
			<div class="product1"><!-- Pocetak .product1 -->
				<a class="product-img" href="#">
                	<img src="#" width="165" height="165"/>
                </a>
                <h3 class="product-grupa"><a href="#">RASVETA</a></h3>  		
        	</div><!-- Kraj .product1 -->
            
       		 <div class="product2"><!-- Pocetak .product2 -->
				<a class="product-img" href="#">
             	  	<img src="#" width="165" height="165"/>
         	   </a>
         	   <h3 class="product-grupa"><a href="#">LED RASVETA</a></h3>  		
       		 </div><!-- Kraj .product2 -->
            
       		 <div class="product3"><!-- Pocetak .product3 -->
				<a class="product-img" href="#">
       	        	<img src="#" width="165" height="165"/>
        	    </a>
    	       	<h3 class="product-grupa"><a href="#">KANALICE</a></h3>  		
	        </div><!-- Kraj .product3 -->
       	         
        	<div class="product4"><!-- Pocetak .product4 -->
				<a class="product-img" href="#">
               		<img src="#" width="165" height="165"/>
	            </a>
    	       	<h3 class="product-grupa"><a href="#">OSIGURAČI</a></h3>  		
    	    </div><!-- Kraj .product4 -->
            
    	    <div class="clear"></div>
        
    	   	<div class="product1"><!-- Pocetak .product1 -->
				<a class="product-img" href="#">
            	   	<img src="#" width="165" height="165"/>
     			</a>
            	<h3 class="product-grupa"><a href="#">MERNI INSTRUMENTI</a></h3>
        	</div><!-- Kraj .product1 -->
            
        	<div class="product2"><!-- Pocetak .product2 -->
				<a class="product-img" href="#">
               		<img src="#" width="165" height="165"/>
            	</a>
            <h3 class="product-grupa"><a href="#">GALANTERIJA</a></h3>  		
        	</div><!-- Kraj .product2 -->
            
        	<div class="product3"><!-- Pocetak .product3 -->
				<a class="product-img" href="#">
               		<img src="#" width="165" height="165"/>
            	</a>
               	<h3 class="product-grupa"><a href="#">KLEME</a></h3>  		
        	</div><!-- Kraj .product3 -->
                
        	<div class="product4"><!-- Pocetak .product4 -->
				<a class="product-img" href="#">
               		<img src="#" width="165" height="165"/>
            	</a>
               	<h3 class="product-grupa"><a href="#">DELOVI ZA VEŠ MAŠINE</a></h3>  
        	</div><!-- Kraj .product4 -->
        
        	<div class="clear"></div>
            
            <div class="product1"><!-- Pocetak .product1 -->
				<a class="product-img" href="#">
                	<img src="#" width="165" height="165"/>
                </a>
                <h3 class="product-grupa"><a href="#">DELOVI ZA BOJLERE</a></h3>  	
        	</div><!-- Kraj .product1 -->
            
       		 <div class="product2"><!-- Pocetak .product2 -->
				<a class="product-img" href="#">
             	  	<img src="#" width="165" height="165"/>
         	   </a>
         	   <h3 class="product-grupa"><a href="#">VENTILATORI</a></h3>  		
       		 </div><!-- Kraj .product2 -->
             
             <div class="clear"></div>
             
        </div><!-- Kraj #content -->
    </div> <!-- Kraj #container-product -->

I have a problem with this div container-product that doesn't contain the children, I will attach picture with problem. And question is, where I made a mistake?