CSS - 2 Columns, One Fixed width, One Responsive

Question

There are many examples on this topic here, but what I am after is something that I cannot seem to find the answer to.

I want to create a two column page: Left column for Navigation (Fixed Width), Right column for content (Responsive). The variation I am after is that I want the Nav to appear on the left for desktop and beneath the content on mobile.

I have the code 'working' kind of, but it's the responsive width of the right column that is the issue.

My code is below, Any guidance would be really valued.

.CF:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.CF { display:inline-block; }
.CF { display:block; }

.content {max-width: 1300px; margin: 0 auto; padding: 0 25px; display:block; }
	.information {display:block; background: lime;}
	.menu {display:block;  background: lightblue;}
	
@media all and (min-width: 992px) {
.content {padding: 0 50px; }
	.information {display:block; float: right; width: auto;  }
	.menu {width: 250px; float:right; }

}

<div class="content CF">

<article class="information">
    Article Information
</article>

<nav class="menu">
    Menu
</nav>

</div>

Answer 1

You've already had two great answers but just to add a few extra options, here are 5 different ways of achieving the same thing:

Example 1: Floats, Widths and Margins

The most compatible method, works on pretty much all browsers. Its also got the smallest CSS footprint.

#example1 .fixedColumn {
  width: 180px;
  float: left;
}

#example1 .flexibleColumn {
  margin-left: 200px;
}

/* gratuituous styling */

.fixedColumn { background-color: #e84c1b; padding: 10px;} .flexibleColumn { background-color: #039be4; padding: 10px;} body { margin: 0; }

<div id="example1">

  <div class="fixedColumn">
    Fixed Column
  </div>
  
  <div class="flexibleColumn">
    Flexible Column
  </div>

</div>

Example 2: CSS calc()

Compatible with IE9+. Its a solid alternative if you don't need backwards compatibility.

#example2.calc {
    overflow: hidden;
}
#example2.calc .fixedColumn {
    width: 180px;
    float: left;    
}
#example2.calc .flexibleColumn {
    width: calc(100% - 220px); /*200px for the fixed column and 20 for the left and right padding */
    float: left;  
}

/* gratuituous styling */

.fixedColumn { background-color: #e84c1b; padding: 10px;} .flexibleColumn { background-color: #039be4; padding: 10px;} body { margin: 0; }

<div id="example2" class="calc">

  <div class="fixedColumn">
    Fixed Column
  </div>
  <div class="flexibleColumn">
    Flexible Column
  </div>

</div>

Example 3: Display as Table

Another solid contender for backwards compatibility works pretty much across the board, but still feels like a bodge making things behave like a table.

#example3.table {
  display: table;
  width: 100%;
}

#example3.table .fixedColumn {
  width: 180px;
  display: table-cell;
}

#example3.table .flexibleColumn {
  display: table-cell;
}

/* gratuituous styling */

    .fixedColumn { background-color: #e84c1b; padding: 10px;} .flexibleColumn { background-color: #039be4; padding: 10px;} body { margin: 0; }

<div id="example3" class="table">
  <div class="fixedColumn">
    Fixed Column
  </div>
  <div class="flexibleColumn">
    Flexible Column
  </div>
</div>

Example 4: Flexbox

Great for modern browsers that support it; simple and intuitive.

#example4.flex {
  display: flex;
}

#example4.flex .fixedColumn {
  width: 180px;
}

#example4.flex .flexibleColumn {
  flex: 1;
}

/* gratuituous styling */

.fixedColumn { background-color: #e84c1b; padding: 10px;} .flexibleColumn { background-color: #039be4; padding: 10px;} body { margin: 0; }

<div id="example4" class="flex">

  <div class="fixedColumn">
    Fixed Column
  </div>
  <div class="flexibleColumn">
    Flexible Column
  </div>

</div>

Example 5: Grid

Out of all the techniques here Grid was supported by browsers last. But its a great option if you have the option to use it.

#example5.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
}

#example5.grid .fixedColumn {
  grid-column: 1;
}

#example5.grid .flexibleColumn {
  grid-column: 2;
}

/* gratuituous styling */

.fixedColumn { background-color: #e84c1b; padding: 10px;} .flexibleColumn { background-color: #039be4; padding: 10px;} body { margin: 0; }

<div id="example5" class="grid">

  <div class="fixedColumn">
    Fixed Column
  </div>
  <div class="flexibleColumn">
    Flexible Column
  </div>

</div>