Мой макет не работает

Question

Как разместить 5-е и так далее изображения рядом с первыми 4-мя изображениями? какие правила стиля CSS мне нужны для этого? на данный момент у меня есть div, который плавает влево:

div#leftcontainer { 
    float: left; 
    height: 30%; 
    width: 100%; 
} 

В нем есть 2 divs с четырьмя изображениями в нем. Второй имеет поплавок право:

.topshops-section-secondcol { 
    float: right; 
    position: static; 
} 

На данный момент 2 комплекта 4 изображений только отображается на верхней, а не рядом друг с другом? jsfiddle: http://jsfiddle.net/Gn7PL/

Answer 1

Как это: jsFiddle here

Вы должны были закрыть <div id="leftcontainer"></div>

В своем нынешнем состоянии, левый контейнер содержал правильный контейнер, таким образом, CSS не осуществивший. Кроме этого, все остальное было прекрасно. Он работает сейчас.

Answer 2

DEMO .Don't использовать слишком много CSS и elements.just идти с простой

HTML

<ul> 
    <li> 
     <img src="https://lh4.googleusercontent.com/-2hC1XUCLbZQ/TpUrgzmXbqI/AAAAAAAAfts/bR367hj_o2w/s90-c-k-no/2011-10-12_11-50-37_HDR.jpg" /> 
    </li> 
    <li> 
     <img src="https://lh4.googleusercontent.com/-2hC1XUCLbZQ/TpUrgzmXbqI/AAAAAAAAfts/bR367hj_o2w/s90-c-k-no/2011-10-12_11-50-37_HDR.jpg" /> 
    </li> 


....etc 

CSS

li{ 
    margin:20px; 
    list-style-type:none; 

}