clubmate.fi

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.

The HTML:

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

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.