html5 - Two elements - Fixed and flexible width (100% - 170px) -

at top level of website layout 4 div tags.

the first 1 full width header section, css:

#header { margin-top: 0px; height: 70px; border: 4px double rgb(255,255,255); border-radius: 20px; background: rgb(88,150,183) no-repeat fixed left top; padding: 0px; } 

at bottom full width footer:

#footer { clear: both; margin: 0px; color:#cdcdcd; padding: 10px; text-align: center; border: 4px double rgb(88,150,183); border-radius: 20px; } 

on left main menu section:

#categories { float:left; width:150px; border: 4px double rgb(88,150,183); border-radius: 20px; } 

all of 3 elements work fine. they're in right place , doesn't change whatever screen resolution user has on monitor, or whether view on not maximum screen size.

my problem main element of page - interesting stuff is. it's directly right of menu div - or rather, should be. css is:

#main { float:right; min-height: 440px; width: 80%; margin-bottom: 20px; padding:20px; border: 4px double rgb(88,150,183); border-radius: 20px; } 

width 80% works ok of users, less resolution, main element shifts below menu, ghastly.

what ideally width set in css #main (100% - 170px), leaving nice margin between menu , main bit @ times , never pushing below menu. however, css standards don't fulfil desire yet!

could suggest how amend css give me nice clean page that's clean users? or need go setting out page using tables?

using css3 calc ^{caniuse stats}

width: calc(100% - 170px); 

example:

*{box-sizing:border-box; -webkit-box-sizing:border-box;}  body{margin:0;}    #aside{    background:#1cea6e;    width: 170px;    float:left;    padding:24px;  }  #main{    background:#c0ffee;    width: calc(100% - 170px);    float:left;    padding:24px;  }

<div id="aside">aside</div>  <div id="main">main</div>

using float: left; , overflow

*{box-sizing:border-box; -webkit-box-sizing:border-box;}  body{margin:0;}    #aside{    width: 170px;         /* you, fixed 170 */    float: left;          /* , floated left */    background:#1cea6e;    padding:24px;  }  #main{    background:#c0ffee;    padding:24px;    overflow:auto;        /* in order preserve padding */    /* or use .clearfix class (google it) */  }

<div id="aside">aside</div>  <div id="main">main</div>

using css3 flex ^{caniuse stats}

*{box-sizing:border-box; -webkit-box-sizing:border-box;}  body{margin:0;}    #parent{    display:flex;  }  #aside{    width: 170px;         /* you, fixed 170 */    background:#1cea6e;    padding:24px;  }  #main{    flex:1;               /* you... fill remaining space */    background:#c0ffee;    padding:24px;  }

<div id="parent">    <div id="aside">aside</div>    <div id="main">main</div>  </div>

using style display: table;

*{box-sizing:border-box; -webkit-box-sizing:border-box;}  body{margin:0;}    #parent{    display: table;    border-collapse: collapse;    width: 100%;  }  #parent > div {    display: table-cell;  }  #aside{    width: 170px;         /* you, fixed 170 */    background:#1cea6e;    padding:24px;  }  #main{    background:#c0ffee;    padding:24px;  }

<div id="parent">    <div id="aside">aside</div>    <div id="main">main</div>  </div>