Как я могу сделать floated div заполнить оставшуюся ширину?

Question

У меня есть div, который имеет float: left, и div, который имеет float: right. У div, который имеет float: left, имеет ширину 50px, а div, который имеет float: right, должен занимать оставшееся горизонтальное пространство в родительском div.

Как это сделать с помощью CSS?

Answer 1

Попробуйте использовать margin-left:60px (или любую ширину вашего левого div может быть) без использования float в правом div. Смотрите соответствующую скрипку здесь: http://jsfiddle.net/CKcQH/

CSS:

.leftDiv 
{ 
    width:50px; 
    float:left; 
    border:1px solid red; 
} 
.rightDiv 
{ 
    margin-left:55px; /* Compute total width of leftDiv */ 
    border:1px solid blue; 
} 

Html:

<div> 
    <div class="leftDiv"> 
     My content on left 
    </div> 
    <div class="rightDiv"> 
     My content on right should take all the space the parent has (after excluding the space on the left) 
    </div> 
</div>