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

Question

At the top level of my website layout are 4 div tags.

The first one is a full width header section, with 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 the bottom is a 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 the left is my main menu section:

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

All of those 3 elements work fine. They're in the right place and that doesn't change whatever screen resolution the user has on their monitor, or whether they view it on not maximum screen size.

My problem is with the main element of the page - where all the interesting stuff is. It's directly to the right of the menu div - or rather, it should be. My 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 for most of my users, but for those with less resolution, the main element shifts below the menu, which is ghastly.

What I would ideally like is for the width set in the css #main to be something like (100% - 170px), thus leaving a nice margin between the menu and the main bit at all times and never pushing it below the menu. However, css standards don't fulfil that desire yet!

Could someone suggest how I amend my css to give me a nice clean page that's clean for all my users? Or do I need to go back to setting out my page using tables?

Answer 1

Using CSS3 flex

* { box-sizing: border-box; margin: 0; }

#parent{
  display: flex;
}
#aside{
  width: 170px;         /* You, be fixed to 170 */
  background: #1CEA6E;
  padding: 24px;
}
#main{
  flex: 1;              /* You... fill the remaining space */
  background: #C0FFEE;
  padding: 24px;
}

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

Using CSS3 calc

width: calc(100% - 170px);

Example:

* { box-sizing: border-box; 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; and overflow

* { box-sizing: border-box; margin: 0; }

#aside{
  width: 170px;         /* You, be fixed to 170 */
  float: left;          /* and floated to the left */
  padding: 24px;
  background: #1CEA6E;
}

#main {
  background: #C0FFEE;
  padding: 24px;
  overflow: auto;        /* don't collapse spaces */
  /* or you could use a .clearfix class (Google for it) */
}

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

Using style display: table;

* { box-sizing: border-box; margin: 0; }

#parent{
  display: table;
  border-collapse: collapse;
  width: 100%;
}
#parent > div {
  display: table-cell;
}
#aside{
  width: 170px;         /* You, be fixed to 170 */
  background: #1CEA6E;
  padding: 24px;
}
#main{
  background: #C0FFEE;
  padding: 24px;
}

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