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: HTML/CSS— Tagged with: layout

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. Tweet me @hiljaa if you want to make a correction etc.

  • © 2021 Antti Hiljá
  • About
  • Follow me in Twatter → @hiljaa
  • All rights reserved yadda yadda.
  • I can put just about anything here, no one reads the footer anyways.
  • I love u!