Responsive 2-column layout trouble - html

Question

I'm having trouble solving this puzzle: I'm using a 2-column layout with a fixed-width right column and a left column which takes out the remaining space. Both heights are variable. So something like this:
<div class="sidebar">sidebar</div>
<div class="main-area">main content</div>
<style>
.sidebar { float: right; width: 250px; }
.main-area { position: relative; overflow: hidden; }
</style>
Ok, so up to here everything is fine. But here comes the tricky bit. I'm using CSS3 to enable a css change when reaching a max-width of 750px. I want the sidebar to break down below and have a 100% width (so it becomes a footer for the main content). But, because in the HTML code the sidebar div is required to be first it always appears above the main area.
Any ideas on how to lay this out?
Thank you very much!

Answer 1

The simple answer to your question is no. You can't make your sidebar move beneath the content in your breakpoint if the sidebar falls before the content area in your HTML. At least... Not without javascript and a bunch of craziness.
That said... Just move your sidebar below your main-content div. Semantically there is no reason for you not to.
<section class="container">
<div class="main-area">main content</div>
<div class="sidebar">sidebar</div>
</section>
Some CSS changes are required to achieve this however. It's not quite as simply done as you had it previously, but not especially difficult either.
.container {
position: relative;
}
.sidebar {
position: absolute;
top: 0;
right: 0;
width: 250px;
}
.main-area {
background: red;
margin-right: 250px;
}
Here is a JSFiddle demonstrating it working.
Feel free to add varying amounts of content to either the main-content area or the sidebar and you'll see that both still have varying heights that don't interfere with each other.

Answer 2

HTML:
<section class="container">
<div class="main-area">main content</div>
<div class="sidebar">sidebar</div>
</section>
CSS:
.container {
position: relative;
max-width: 1024px; /* could be width: x% as well*/
}
.sidebar {
position: absolute;
right: 0; top: 0;
width: 250px;
}
.main-area {
margin-right: 260px; /* sidebar width plus 10px gap */
}
#media only screen and (max-width: 750px) {
.sidebar {
position: static;
width: 100%;
}
.main-area {
width: 100%;
margin-right: 0;
}
}

Answer 3

I think you can realize this with jQuery.
HTML
<div class="main-area"></div>
<div class="sidebar"></div>
CSS
.sidebar{
background-color: #000;
height: 200px;
width: 50%;
}
.main-area{
position: relative;
background-color: #ff0000;
height: 200px;
width: 50%;
}
jQuery
$(function(){
$('.sidebar').css('float', 'right');
$('.main-area').css('float', 'left');
$(window).resize(function(){
if($(this).width() <= 750){
$('.main-area').removeAttr('style');
$('.sidebar').removeAttr('style');
}else{
$('.sidebar').css('float', 'right');
$('.main-area').css('float', 'left');
}
});
});
You can see result here -> jsFiddle
Well, this is my way.

Answer 4

I think I found the answer here: http://jsfiddle.net/salman/TPNpy/
<div id="main-area-wrap">
<div id="main-area">Column 1</div>
</div>
<div id="sidebar">Column 2</div>
<div id="clear"></div>
#main-area-wrap{
float: left;
width: 100%;
}
#main-area {
background-color: cyan;
margin-right: 200px;
}
#sidebar{
background-color: lime;
float: left;
width: 200px;
margin-left: -200px;
}