Left Sidebar Under Content

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

Tagged with: ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.