Фиксированная маржа и ширина жидкости Принимая 100% родительского

Question

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

Я хотел бы иметь 2 divs, один внутри другого. Родительский div должен принимать 100% ширины окна, дочерний div должен иметь фиксированные поля и в то же время ширина жидкости, заполняющая 100% оставшейся ширины родителя. (Родительский div - 2 поля ребенка)

Очень очевидно, как это сделать, используя javascript, но мне интересно, есть ли возможность усвоить это, используя только CSS и HTML.

Example picture

P.S. Он должен быть действителен для ie8 +

Answer 1

Вы хотите, как это?

ДЕМО: jsfiddle.net/G5qD3

Answer 2

CSS:

<style type="text/css"> 
.parent { 
width: 100%; 
overflow: hidden; 
background: #ccc; 
} 

.child { 
width: auto; 
margin: 30px; 
padding: 30px; 
background: #eee; 
} 

body { 
margin : 0; 
padding: 0; 
} 
</style> 

HTML:

<div class="parent"> 


    <div class="child">Child Container</div> 

</div> 

Answer 3

HTML 
<div class="main_div"> 
<div class="inner_div"> 
    <div >sfdsd</div> 
</div> 
</div> 

CSS 
body { 
margin : 0; 
padding: 0; 
} 
.main_div { 
width: 100%; 
height: 200px; 
background: #ccc; 
text-align: center; 

}

.inner_div { 
width: 90%; 
margin: 50px auto; 
background: #eee; 
display: inline-block; 
text-align: left; 
height: 100px; 

}

Answer 4

В этом случае, я часто устанавливают padding свойство наружной div вместо установки margin от внутреннего div:

#outer { 
    border: 1px solid #000; 
    padding: 50px; /* this is the important thing, others are for demo purpose only*/ 
    height: 100px; 
} 

#inner { 
    background: red; 
    height: 100%; 
} 

и HTML

<div id="outer"><div id="inner"></div></div> 

live demo