RWD: Rearrange content in a multicolumn layout without flexbox

If you ever needed to rearrange the order of content sections at different breakpoints, but avoid CSS flexbox and the local CSS context it creates then this method that utilises negative margin float is perfect for you. Reordering sections in a linear fashion is easily done with flexbox. However, offsetting the section that is positioned as second in the HTML code and shifting it to the sidebar as soon as the viewport width can accommodate multiple columns — might be a problem. If you have trouble imagining this setup, take a look at the demo.

The result of the sections rearrangement.
The result of the sections rearrangement.

This case isn’t applicable to every project, but there are times when it’s the only sensible option, for instance when the second section is a piece of interface that doesn’t have to follow the linear flow of the rest of the content on desktop screens, but might be important on mobile screens. One such case might be opening hours for a restaurant or a museum, that can be conveniently moved aside on desktop screens.

The example shown below is very simple and is suitable for a 40% wide sidebar layout. For more ratios see the accompanying demo. This technique is dependent on box-sizing: border-box, so keep that in mind when testing in browsers that don’t support that property.

* { box-sizing: border-box; }
.wrapper { float: left; width: 100%; padding-left: 40%; }
.first   { float: left; width: 100%; padding-left: 10px; }
.second  { float: left; position: relative; left: -100%; width: 66.66666666%; margin-left: -66.66666666%; } 
.third   { float: right; width: 100%; padding-left: 10px; }

<div class="wrapper">
    <div class="first">Primary content</div>
    <div class="second">Secondary content</div>
    <div class="third">Tertiary content</div>

The trickiest part is getting percentages right. I’ve written about how to calculate percentages in multicolumn layouts before. In a nutshell, use the following formula to determine the value for both the width and the negative margin of the off-set section.

container’s left padding in % = x
offset element’s width in % = (x / (100 - x)) * 100

A few examples:

container’s left padding in % = 50
offset element’s width in % = (50 / (100 - 50)) * 100 = 100

container’s left padding in % = 40
offset element’s width in % = (40 / (100 - 40)) * 100 = 66.66666666

container’s left padding in % = 33.33333333
offset element’s width in % = (33.33333333 / (100 - 33.33333333)) * 100 = 50

container’s left padding in % = 25
offset element’s width in % = (25 / (100 - 25)) * 100 = 33.33333333

container’s left padding in % = 20
offset element’s width in % = (20 / (100 - 20)) * 100 = 25

For the opposite arrangement, i.e. the second section floated to the right, switch the direction of floats (including the other two sections), paddings and margins. Easy!

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?