[ ← blog / css ](/) Mar 18, 2013  ·  \#css  ·  2 min read 

# A better responsive sidebar



 Sidebar content always gives me a little twinge when it comes to responsive design. Typically a left sidebar will end up stacking directly above the content and a right sidebar directly below. This can be fine, unless your left sidebar has 5 different content areas and now the user has to scroll two screen lengths just to read an article. Or the right sidebar has an important call-to-action you apparent to each visitor, but it resides underneath the content on a mobile device. By using separate regions and floats a single sidebar can easily be broken into two creating a responsive sidebar and giving you more room to play with responsive design.Take for example a structured template like so 

```
<div id="page">
  ...
  <section class="sidebar-top">
      ...
  </section>
  <section class="content">
      ...
  </section>
  <section class="sidebar-bottom">
     ...
  </section>
 ...
</div>
```

Essentially we just set up a typical three column template. Now apply some CSS 

```
section.sidebar-top,
section.sidebar-bottom {
  float: left;
}

section.content {
 float: right;
}
```

A responsive sidebar utilizes breakpoints to give you greater control over your design. This causes the *section.sidebar-bottom* to float underneath *section.sidebar-top* and keep the content area to the right of the sidebar. In this case we just set up a left sidebar that has a breakpoint we can utilize in responsive design. For my website I set a breakpoint for tablets - keep the top of the sidebar aligned left to the content, but stack the second half of the sidebar below the content. 

```
@media (max-width: 979px) and (min-width: 768px) {
   section.sidebar-bottom {
      clear: both;
      float: none;
      width: 100%;
   }
}
```

And when we hit mobile, the sections stack on top of each other as they would in normal element hierarchy. 

```
@media (max-width: 480px) {
  section.sidebar-top,
  section.content,
  section.sidebar-bottom {
      clear: both;
      float: none;
      width: 100%;
  }
}
```

 

  ![](/themes/custom/mglaman/images/headshot.webp)Thanks for reading

I write about Drupal, PHP, and the quiet infrastructure behind large sites — caching, config, and testing. New posts land every week or two.

 [Subscribe via RSS →](/rss.xml) [About me →](/about-me) 

 



 

  [← Older

Speed Up WordPress Load Time

 ](/blog/speed-wordpress-load-time) [Newer →

Drupal Commerce: Now your Point of Sale

 ](/blog/drupal-commerce-now-your-point-sale)