Увеличить ширину взять оставшуюся ширину родительского DIV

Question

пример моего кода можно найти на JSFiddle http://jsfiddle.net/WdZgV/

CSS

<style type="text/css"> 
body { 
    margin: 0; 
    padding: 0; 
} 

.header_div { 
    display: inline-block; 
    width: 100%; 
    text-align: center; 
} 

.header { 
    display: inline-block; 
    height: 100px; 
    width: 100%; 
    max-width: 1000px; 
    background: #ddd; 
} 

.logo { 
    float: left; 
    width: 200px; 
    height: 100px; 
    background: #bbb; 
} 

.menu { 
    float: left; 
    width: 800px; 
    height: 100px; 
    background: #999; 
} 
</style> 

HTML

<div class="header_div"> 
    <div class="header"> 
     <div class="logo"></div> 
     <div class="menu"></div> 
    </div> 
</div> 

Что я хочу заключается в том, что при изменении размера окна до менее 1000px .menu div изменить размер до родительского div.

Так как пример:

Если у вас есть ширина окна в 900px, то .logo ДИВ имеет 200px и .menu DIV имеет 700px.

В любом случае, я могу сделать это с помощью CSS или мне нужно использовать Javascript?

Answer 1

Да - удалить float, не указывайте width и установите overflow в hidden. Example here; .menu становится:

.menu { 
    height: 100px; 
    background: #999; 
    overflow: hidden; 
} 

Answer 2

@Andoni Рой Используйте этот

.logo { 
    float: left; 
    width: 200px;  
    height: 100px; 
    background: #bbb; 
     } 

.menu { 
    float:right;  
    overflow:hidden; 
    height: 100px; 
    background: #999; 
     } 

Answer 3

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

Как показано в следующем примере: http://jsfiddle.net/A8zLY/745/

Вы бы в конечном итоге, что-то вроде:

HTML

<div class="header_div"> 
    <div class="header"> 
     <div class="logo"></div> 
     <div class="menu"></div> 
    </div> 
</div> 

CSS

.header_div { 
width: 1280px; 
} 

.header { 
display: table; 
} 

.logo { 
display: table-cell; 
width: 280px; 
} 

.menu { 
display: table-cell; 
width: 1000px; 
} 

Вы можете указать ширину в процентах.