Процентная ширина меньше пикселей с наименьшим количеством элементов DOM

Question

Я пытаюсь найти чистое решение CSS, которое будет отображать этот макет, используя наименьшее количество элементов DOM и без каких-либо изображений.

Desired layout http://oi39.tinypic.com/2mza5ht.jpg

Реальная проблема получает DIV, чтобы быть 50% ширины минус некоторые пиксели - например, 50% в ширину меньше 10px

С наилучшими усилиями я настроил jsfiddle - это работает отлично, но я надеюсь на то, что имеет меньше элементов DOM.

Это мой HTML:

<div class="main"></div> 
<div class="backHalf"> 
    <div class="backLeft1"></div> 
    <div class="backLeft2"></div> 
    <div class="backLeft3"></div> 
</div> 
<div class="backHalf"> 
    <div class="backRight1"></div> 
    <div class="backRight2"></div> 
    <div class="backRight3"></div> 
</div> 

и CSS:

.main, .backHalf div { height: 10px; background-color: #000} 
.backHalf { width: 50%; float:left} 
.backMain { height: 50px; } 
.backLeft1 { margin-right: 10px; } 
.backRight1 { margin-left: 10px; } 
.backLeft2 { margin-right: 20px; } 
.backRight2 { margin-left: 20px; } 
.backLeft3 { margin-right: 30px; } 
.backRight3 { margin-left: 30px; } 

Кстати, я уверен, что, если есть лучшее решение, оно не будет иметь много меньше элементов DOM, но даже потерять поможет. Например. если можно добиться того же результата без div'a, что бы очень помогло.

Answer 1

Вы можете использовать новую функцию CSS3 calc(), которая позволяет рассчитать ширину или высоту непосредственно в CSS.

Пример: calc(50% - 10px);

Здесь я до сих пор: JSFiddle, это в значительной степени сделано, но у меня есть некоторые вопросы clear. Есть идеи?

See this reference on MDN