Fixed and fluid columns - html

Question

So I'm trying to create a full width webpage, that when the browser scales down from a large display to medium, a sidebar collapses, then when the display is the width of the main content, the sidebar drops below the content (I'll explain with pictures).
I've created this JSFiddle: http://jsfiddle.net/7N2Jr/2/
In it there is a fixed sidebar - the main navigation.
Also there is the div.inside which holds all the content.
<article class="one"> holds the main content (the news article), while <article class="two"> will hold related posts, adverts, and the like.
What I intend to create is (excuse the fiddle not being large enough to show this):
The header remains the same size.
The <article class="one"> will have a width of 920px, or 46em (on a base 20px). It will remain this width until the browser window is 46em or less.
The <article class="two"> will fill up the remainder of the browser next to <article class="one">. When the width of <article class="two"> reaches a certain width it will drop the content into one column. Then when the width is 46em, it will drop below the content.

Answer 1

Check Bootstrap 3.0, it provides everything you're looking for!
as an example: in this case your HTML would look like this:
<div id='text' class='col-lg-6 col-sm-8 col-xs-12'>
put your text here
</div>
<div id='images' class='col-lg-6 col-sm-4 col-xs-12'>
<div id='img1' class='col-lg-6 col-sm-12 col-xs-6'> ... </div>
<div id='img1' class='col-lg-6 col-sm-12 col-xs-6'> ... </div>
</div>
Bootstrap uses a 12 column grid. For different screen sized (LG, SM, XS for instance) you can define how many of these columns a DIV takes up in that grid.

Answer 2

Like people above said , try instead using bootstrap framework.
However if you don't want that then just read about media queries.
You can start here: http://css-tricks.com/css-media-queries/

Answer 3

Here is an update to my JSFiddle: http://jsfiddle.net/7N2Jr/6/
After some tinkering, it got there.
Then when the images drop to the right side, under the main text I'll use the media-query to remove the margins

Answer 4

<edit> You could use float as a fallback for the flexbox http://jsfiddle.net/7N2Jr/8/ </edit>
If you do not mind using flexbox , for younger browser only, you could give it a try :
DEMO
.inside, article.two{
display:flex;
padding:1em;
flex-wrap:wrap;
}
.inside, article {
background:rgba(0,0,0,0.3);
margin:1em;
}
article.one {
flex:3;
min-width:800px;
}
article.two {
min-width:200px;
}
.filler {
min-width:200px;
min-height:80px;
margin:auto;
background:black;
margin:1em;
align-self:flex-start;
flex:1;
}
check it in different browser to find out if it suits your needs.
bootstrap can be used as a fallback for browser wich doesn't apply the flex rules.