Dynamic layout in CSS

Question

I have made a very simple layout in CSS in ASP.net.

HTML

<div id="header">
<h1>Header</h1>
</div>

<div id="nav">
<h1> Site
</div>

<div id="section">
<h1>Content</h1>
 </div>

<div id="footer">
Footer
</div>

CSS

#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;          
}
#section {
    text-align:center;
    width:350px;
    float:left;
    padding:10px;        
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;      
}

jsfiddle

What I want is that if I change the size of footer,header or content area in my design view of ASP.net designer all other areas resize themselves accordingly. that is increasing or decreasing any section has cascading effect on all other areas. For example if I increase the size of footer then size of content and header should make their size at par with the footer. How this could be done?

Answer 1

So you basically want a responsive design? I have added a wrapper div around your contents, when you increase the width of that, width of other elements will also get increased as the width is given in percentage. Please see fiddle for more details https://jsfiddle.net/ptgcfgks/1/

<div id="wrapper">

<div id="header">
<h1>Header</h1>
</div>

<div id="nav">
<h1> Site
</div>

<div id="section">
<h1>Content</h1>
 </div>

<div id="footer">
Footer
</div>

 </div><!--wrapper-->