How to make sidebars move below content

[Ron Strilaeff]

Here is my codepen reduced test case: http://codepen.io/RonStrilaeff/pen/pKBdf

I have two fixed width sidebars on the outside edges of my page with the content autosizing between them … that works.

However, when the screen gets smaller, I want the sidebars pushed down below the content. That basically is the opposite of what my demo does. :-)

What I want to know is what kind of css magic do I have to do inside my media queries to make it behave that way? I’m thinking it has something simple to do with float or clear that I have not grasped yet. Or maybe I need to start with a different order to my divs in the html.

Any help is greatly appreciated.

[Paulie_D]

Or maybe I need to start with a different order to my divs in the html.

Probably….remember floats operate in source order so if the have a sidebar on the left you can’t make it float below anything that comes after it.

This is something that flex-box will solve but the support for it is lacking at the moment.

[Ron Strilaeff]

Yes I’m seeing that float and source issue more clearly now.

Chris’s clear distinction between float and absolute from this page

Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage…

gave me a clue about how to do what I want. I will absolutley postion them left, right and top in my wrapper until a certain size when they will then be made static and floated below the content. ding!!

[jurotek]

remember floats operate in source order so if the have a sidebar on the left you can’t make it float below anything that comes after it

Yes and no. It can be done with floats by first setting right negative margin 100% on your 3 columns and the source order can be anyway you like. See it at 768px width Here. Don’t know tho, if it can be done using fixed width on your left and right columns.

[Ron Strilaeff]

Thanks of your ideas.

Here is the solution I went with (a fork of the first codepen):
http://codepen.io/RonStrilaeff/pen/oefav

• put the content div first with specific margins to match sidebar widths
• made the sidebars normally fixed (top, left or right) within the wrapper containing both sidebars and the content
• at whatever width needed, made each sidebar static and float left or right (below content is natural because of source order) while removing the respective content margin

Voila!

I’m very happy with this since it does not involve much code at all and seems pretty standard … ie: no “tricks”. :-)

[Ron Strilaeff]

Nice… very educational. Thanks.

[Author]

Posts