CODEWITHSUNDEEP
css
Brandrally
Brandrally

Reputation: 851

CSS - 2 Columns, One Fixed width, One Responsive

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>

Upvotes: 7

Views: 8968

Answers (3)

Chris Spittles
Chris Spittles

Reputation: 15359

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>

Upvotes: 5

sol
sol

Reputation: 22919

I would suggest looking at CSS Grid or Flexbox for layout. Support for Grid is good.

Example using Grid...

codepen

.content {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 25px;
  display: block;
  grid-template-columns: 250px 1fr;
}

.information {
  background: lime;
  order: 2;
}

.menu {
  background: lightblue;
}

@media all and (min-width: 992px) {
  .content {
    display: grid;
    padding: 0 50px;
  }
}
<div class="content CF">
  <article class="information">
    Article Information
  </article>
  <nav class="menu">
    Menu
  </nav>
</div>

Upvotes: 3

Gerard
Gerard

Reputation: 15786

I would use flexbox to solve this.

Below the menu is at the left side when the width of the screen is more than 991 pixels. Otherwise it is below the article.

I have assigned colors for visibility only.

.content {
  display: flex;
  background: blue;
}

.menu {
  width: 100px;
  background: red;
}

.information {
  background: green;
  flex-grow: 1;
}

@media all and (max-width: 991px) {
  .content {
    flex-wrap: wrap;
  }
  .menu {
    order: 2;
  }
  .information {
    order: 1;
    min-width: 100%;
  }
}
<div class="content">
  <nav class="menu">
    Menu
  </nav>
  <article class="information">
    Article Information
  </article>
</div>

Upvotes: 4

Related Questions