Как правильно выровнять эти элементы?

Question

В настоящее время я работаю на веб-странице с некоторыми слайдерами jQuery-UI, но у меня возникают проблемы с правильным выравниванием всех вещей.

HTML:

<div class="row"> 
     <div id="hue"><img src="download.png" class="hue" /></div> 
     <div id="mixedColor"></div> 
    </div> 
    <div class="rowVert"> 
     <div class="vert" id="CSVhue"></div> 
     <div class="vert" id="CSVsat"></div> 
     <div class="vert" id="CSVbright"></div> 
    </div> 

CSS:

#hue { 
    display: block; 
    width: 90%; 
    float: left; 
    margin: 0 auto; 
    margin-top: 37px; 
} 

.hue { 
    height: 12px; 
    width: 100%; 
} 

#mixedColor { 
    display: block; 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
    float: right; 
} 

.vert { 
    margin-top: 100px; 
} 

Но без какого-либо успеха.

Вот JSFiddle: http://jsfiddle.net/npL866zz/1/

Как я хочу это:

Обратите внимание, мой веб-страница оптимизирована для IE7, так что все команды должны быть оптимизированы для этого одного браузера.

Answer 1

Вот то, что вы могли бы работать с

Fiddle demo

#hue { 
    margin-top: 50px; 
    margin-right: 110px; 
    overflow: hidden; 
} 
.hue { 
    height: 17px; 
    width: 100%; 
} 
#mixedColor { 
    position: absolute; 
    right: 10px; 
    top: 10px; 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
} 
.rowVert { 
    padding-top: 40px; 
    padding-right: 110px; 
    padding-left: 20%; 
} 
.vert { 
    float: left; 
    margin-left: 14%; 
    width: 15px; 
    height: 100px; 
}