A good[ish] website

Web development blog, loads of UI and JavaScript topics

Fluid multi column layout where sidebar and margins stays fixed width, without JavaScript

Filed under: UI components— Tagged with: layout, CSS

More fluid layout examples ahead. First I was like hmm... sure need js to that. But of course not!

I was working on a layout with a lot of narrow columns and a sidebar. First I did it like this.

Problems in that approach:

  • Margins are define in percentage so they vary depending on the width of the window, we don't want that
  • On low resolutions the sidebar gets too narrow and the list in it wraps, ugly.

What we want:

  • Fluid width columns
  • Static width sidebar
  • Static width margins

See in the fiddle what I mean

Elementary HTML and CSS

Here's what we're doing, check the comments in the code.


<!-- Wrapper in normal fashion -->
<div class="wrap">
  <!-- Normal header -->
    <h1>Fixed width sidebar in a fluid layout</h1>
  <!-- Apply the margin to this not the wrap -->
    <!-- Give the columns a wrapper -->
    <div class="article-wrap">
        <!-- Inner element to the columns -->
        <div class="inner-article">Some content here</div>
        <div class="inner-article">Some content here</div>
      <article class="last">
        <div class="inner-article">Some content here</div>
      <!-- Inner element here also -->
      <div class="inner-sidebar">
          <li>Some sort of a menu</li>
          <li>List item 2</li>
          <li>List item number three</li>

And the CSS:

.wrap {
  width: 100%;

/* Margin in the inner wrapper */
section {
  font: normal 13px/1.4 sans-serif;
  margin: 20px;

/* Right margin width of the sidebar */
.article-wrap {
  margin: 0 193px 0 0;

/* Float the columns and give width depending on how many you have them */
article {
  float: left;
  width: 33%;

/* Apply margins and paddings to the inner element */
.inner-article {
  background: LightGoldenRodYellow;
  margin: 0 20px 0 0;
  padding: 10px;

/* Position the sidebar absolutely */
aside {
  background: Aquamarine;
  height: 350px;
  position: absolute;
  top: 74px;
  right: 20px;
  width: 200px;

/* Again paddings and margins in the inner element */
.inner-sidebar {
  padding: 15px;

/*Just to make is pretty*/
header {
  margin: 20px;
  width: 100%;

h1 {
  font: bold 25px/1.4 sans-serif;

h2 {
  font: bold 18px/1.4 sans-serif;

p {
  margin: 10px;

ul {
  list-style: disc;
  margin: 0 0 0 17px;

The key here is to wrap elements. Check the full code in the fiddle.

Comments would go here, but the commenting system isn’t ready yet, sorry.

  • © 2022 Antti Hiljá
  • About
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!