Динамическая ширина div внутри другого div

Question

У меня есть 2 встроенных div внутри родительского div:

.parent {
    width: 200px;
    height: 200px;
}
.div1 {
    float: left;
    width: 10px;
    height: 10px;
    background-color: blue;
}
.div2 {
    position: relative;
    height: 100%;
    width: 100%;
    right: 0px;
    float: left;
    background-color: red;
} 

Проблема в том, что div2 наследует ширину parent div вместо оставшейся ширины (то есть 190px) и в конечном итоге div2заканчивается ниже div1.

Вот пример использования jsfiddle: http://jsfiddle.net/jZBE6/

Как я могу сделать div2 шириной 190 пикселей без установки статической ширины?

Answer 1

Если вам действительно нужна динамическая ширина (не только 10px), вы не можете использовать css. Но вы можете использовать JavaScript для динамического задания ширины http://jsfiddle.net/jZBE6/19/

Answer 2

Вы можете сделать это следующим образом:

.parent{
    width:200px;
    height:200px;
}

.div1 {
   float: left;
   width:10px;
   height:10px;
   background-color:blue;
}

.div2{
    height:100%;
    width:90%;
    float:left;
    background-color:red;
} 

Вы также можете сделать это без плавающего правильного div (это я бы предпочел):

.parent{
    width:200px;
    height:200px;
}

.div1 {
    float: left;
    width:10px;
    height:10px;
    background-color:blue;
}

.div2{
    height:100%;
    width:100%;
    margin-left:10px;
    background-color:red;
}