CSS keep footer flag - css

Question

I have the following issue with the next code posted in JSFiddle: http://jsfiddle.net/b9XVV/1/
HTML
<div class="content">
<div class="header">THGE HEADER OF THE PAGE</div>
<div class="thebody">
HERE GOES THE CONTENT OF THE PAGE......
</div>
<div class="footer">
<div class="footerContent">
<div class="footer1">Footer section</div>
<div class="footer2"></div>
</div>
</div>
</div>
CSS
.header {
width:100%;
height:50px;
background-color:#FFFF58;
}
.thebody {
width:500px;
height:400px;
margin:0 auto;
background-color:#DDD;
}
.footer {
width:500px;
height:50px;
background-color:#696969;
margin:0 auto;
}
.footerContent {
width:500px;
height:50px;
}
.footer1 {
width:400px;
height:50px;
float:left;
}
.footer2 {
width:100px;
height:50px;
float:left;
background-color:#FFddFF;
position:fixed;
right:0;
}
The question is that the pink Div should always stay on the footer and fixed on the right, but if window width is less than body width plus pink Div width, the pink Div should be kept on the left of the main footer (500px width)
Another issue is that scrolling the content, the pink div should always stay at the same level of the footer.

Answer 1

CSS:
.footer2 {
width:100px;
height:50px;
background-color:#FFddFF;
}
#media all and (max-width: 649px){
.footer2 {
position: inline;
float: right
}
}
#media all and (min-width: 650px){
.footer2 {
position:fixed;
right:0;
bottom: 0;
}
}
Demo: http://jsfiddle.net/b9XVV/2/
Watch the compatibility of the media queries: http://caniuse.com/#feat=css-mediaqueries Your main problem (if applicable) is IE8.