In my content layout, I have structured the sections as header, content, and footer. While I want to maintain this order for small devices, I am looking to shift the header and footer to the sidebar on desktop.
I have already implemented this using floats: http://codepen.io/anon/pen/jqrZby
Here is the markup:
<div class="page">
<div class="top"></div>
<div class="content"></div>
<div class="bottom"></div>
</div>
CSS styles:
.page {
border: 2px solid black;
padding: 1em;
}
.page:after {
content: "";
display: block;
clear: both;
}
.page > * {
margin-bottom: 1em;
}
.top {
border: 2px solid red;
height: 100px;
}
.content {
border: 2px solid blue;
height: 400px;
}
.bottom {
border: 2px solid green;
height: 200px;
}
@media screen and (min-width: 800px) {
.content {
width: 66%;
float: left;
}
.top, .bottom {
width: 33%;
float: right;
}
}
Now, I'm exploring a flexbox solution with fixed spacing between content and sidebar. Does anyone have any ideas if this is achievable?