Block with the goods "dropped" under the unit categories - css

Question

This is my problem:
If i used standart pictures and description (like picture 1) - i have good appearance of the site. But when I use the data from the database, the block catalog moves down the left (picture 2).
The code is the same in both cases, but the appearance is very different
#wrapper {
margin-top:40px;
width: 1200px;
margin: 0 auto;
height: auto !important;
}
#category
{
padding:10px 10px 10px 20px;
border-left: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
width:200px;
clear:both;
display:block;
}
#category ul li{
word-wrap: break-word;
list-style-image: url(/neoshop/images/check.png);
padding:10px 0px 10px 10px;
border-bottom:1px dotted #cccccc;
}
#category ul li:last-child{
border-bottom:0px dotted #cccccc;
}
#category ul li a{
font:15px/1.3 "Arial", Arial,Helvetica, sans-serif;
margin-top:0px;
font-weight:100;
display:block;
color:#2f3638;
text-decoration:none;
line-height:20px;
}
#category ul li a:hover{
color:#0bb1e8;
}
#category ul ul a{
list-style-image:none;
color:#8b8b8b;
background:#fff;
}
#category ul ul{
margin-top:5px;
display:none;
color:#8b8b8b;
background:#fff;
}
#category ul ul li{
word-wrap: break-word;
list-style-image: none;
padding:10px 0px 10px 10px;
border-bottom:1px dotted #cccccc;
}
.catalog
{
margin-left:12px;
float:left;
width:948px;
}
.product-main
{
width:236px;
height:285px;
float:left;
}
.product{
border-right:1px dotted #cccccc;
padding:0 15px;
}
.product h2{
color:#111017;
text-align:center;
font:bold 14px/1.3 Tahoma;
margin:0 0 15px 0;
}
.product h3{
color:#111017;
text-align:center;
font:bold 12px/1.3 Tahoma;
margin:0 0 15px 0;
}
.product-img{
text-align:center;
}
.product-img img{
weight:114px;
height:112px;
}
.price{
font:13px/1.3 "Arial", Arial,Helvetica, sans-serif;
color:#0bb1e8;
}
.price span{
font:13px/1.3 "Arial", Arial,Helvetica, sans-serif;
color:#111017;
text-align:center;
}
.price a{
clear:both;
float:right;
}
.bot-dot
{
border-bottom:1px dotted #cccccc;
margin:20px;
}
.product-main:nth-child(4n) .product
{
border-right:none;
}
.product-main:last-child .product
{
border-right:none;
}
.product-main:nth-child(4n) .bot-dot
{
margin: 20px 0 20px 20px;
}
.product-main:nth-child(4n+1) .bot-dot
{
margin: 20px 20px 20px 0px;
}
It must be like this:
But i have this:

Answer 1

when the actual images are being loaded,
the total width of your catalog increases more than 948px and so it has to move to next line.
in
.product-img img{
weight:114px;
height:112px;
}
instead of width you have specified weight by mistake