• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

My Monkey Do

A Log of Coding Solutions

  • Home
  • Web Hosts
  • Tools
  • About

Left Sidebar Under Content

June 8, 2015 by Webhead

Problem

Having a left sidebar move under the content in a responsive design needs a bit more thinking.  You can’t just do float left width 100% or display block and let the sidebar fall to the next line.

Solution

When the browser width is narrow, use display:table-footer-group for the sidebar, display:table-header-group for the content, and display:table for the parent container.

See more:

http://www.iandevlin.com/blog/2013/06/css/css-stacking-with-display-table

Filed Under: Coding Tagged With: css, responsive

Primary Sidebar

Topics

502 apache apple bluehost bootstrap buddypress chrome cloudways cms css debug drupal eCommerce firebug firefox git goDaddy google google analytics google maps hacked hosting htaccess html html 5 icons IE crap image iPad iPhone javascript jquery linux localization mac os x ms sql mysql open source optimize php tinymce wordpress wpengine yii youtube




Categories

  • Coding
  • Off the Shelf
  • Plugins
  • Random Thoughts
  • Server Stuff
  • Tools