Нужна помощь, проблема получается в чём, добавил болок с картинкой на страницу , а все товары слетели в право.
Как их вернуть обратно, но при этом что бы блок с права остался на своём месте?
Код:
/*Feature Glass*/
.reclam{
float: right;
}
/*Товары*/
.midl-col{
width: 757px;
margin-left: 191px;
margin-right: 452px;
float: left;
}
.products-list>li{
display: inline-block;
margin: 0 28px 27px 0;
min-height: 319px;
float: left;
border: 1px solid #eeeeee;
}
.products-list>li:hover,
.products-list>li.active
{
border: 1px solid #64608f;
cursor: pointer;
background: url(img/Korzinka.png) no-repeat 160px 247px;
}
.products-list>li:nth-child(3n){
margin-right: 0;
}
.products{
padding-left: 13px;
}
.old-price{
font-size: 11pt;
color: #464148;
text-decoration: line-through;
}
.price{
position: absolute;
color: #7db122;
font-size: 15pt;
}
/*New icon*/
.special{
position: absolute;
top: 10px;
text-indent: -9999px;
z-index: 1;
}
.special .bue{
background: url(img/NEW%20icon.png) no-repeat 0 0;
}
.new {
position: absolute;
width: 90px;
height: 85px;
left: 610px;
top: 749px;
}
<div class="reclam">
<h2>Featured</h2>
<h2>Glass</h2>
<img src="img/Featured%20Glass.png" alt="">
</div>
<div class="midl-col">
<ul class="products-list">
<li class="active">
<img src="img/prod1.png" alt="">
<div class="products">
<p>Lorem Ipsum is simply.</p>
<p></p>
<div class="price-block">
<p class="price">$388.00</p>
</div>
</div>
</li>
<li>
<img src="img/new.png" alt="" class="new">
<img src="img/prod2.png" alt="">
<div class="products">
<p>Lorem Ipsum is simply.</p>
<p></p>
<div class="price-block">
<p class="price">$90.00</p>
</div>
</div>
<ul class="special">
<li class="bue">yjasfasfsafasf</li>
</ul>
</li>
<li>
<img src="img/prod3.png" alt="">
<div class="products">
<p>Lorem Ipsum is simply.</p>
<p></p>
<div class="price-block">
<p class="old-price">$460</p>
<p class="price">$300.00</p>
</div>
</div>
</li>
<li>
<img src="img/prod3.png" alt="">
<div class="products">
<p>Lorem Ipsum is simply.</p>
<p></p>
<div class="price-block">
<p class="price">$90.00</p>
</div>
</div>
</li>
<li>
<img src="img/prod3.png" alt="">
<div class="products">
<p>Lorem Ipsum is simply.</p>
<p></p>
<div class="price-block">
<p class="price">$90.00</p>
</div>
</div>
</li>
<li>
<img src="img/prod3.png" alt="">
<div class="products">
<p>Lorem Ipsum is simply.</p>
<p></p>
<div class="price-block">
<p class="price">$90.00</p>
</div>
</div>
</li>
<li>
<img src="img/prod3.png" alt="">
<div class="products">
<p>Lorem Ipsum is simply.</p>
<p></p>
<div class="price-block">
<p class="price">$90.00</p>
</div>
</div>
</li>
<li>
<img src="img/prod3.png" alt="">
<div class="products">
<p>Lorem Ipsum is simply.</p>
<p></p>
<div class="price-block">
<p class="price">$90.00</p>
</div>
</div>
</li>
<li>
<img src="img/prod3.png" alt="">
<div class="products">
<p>Lorem Ipsum is simply.</p>
<p></p>
<div class="price-block">
<p class="price">$90.00</p>
</div>
</div>
</li>
<li>
<img src="img/prod3.png" alt="">
<div class="products">
<p>Lorem Ipsum is simply.</p>
<p></p>
<div class="price-block">
<p class="price">$90.00</p>
</div>
</div>
</li>
<li>
<img src="img/prod3.png" alt="">
<div class="products">
<p>Lorem Ipsum is simply.</p>
<p></p>
<div class="price-block">
<p class="price">$90.00</p>
</div>
</div>
</li>
<li>
<img src="img/prod3.png" alt="">
<div class="products">
<p>Lorem Ipsum is simply.</p>
<p></p>
<div class="price-block">
<p class="price">$90.00</p>
</div>
</div>
</li>
<li>
<img src="img/prod3.png" alt="">
<div class="products">
<p>Lorem Ipsum is simply.</p>
<p></p>
<div class="price-block">
<p class="price">$90.00</p>
</div>
</div>
</li>
<li>
<img src="img/prod3.png" alt="">
<div class="products">
<p>Lorem Ipsum is simply.</p>
<p></p>
<div class="price-block">
<p class="price">$90.00</p>
</div>
</div>
</li>
<li>
<img src="img/prod3.png" alt="">
<div class="products">
<p>Lorem Ipsum is simply.</p>
<p></p>
<div class="price-block">
<p class="price">$90.00</p>
</div>
</div>
</li>
</ul>
</div>
</div>