Q:

Equal Height Columns with background filling more than half of page

For anyone interested in, final code: http://jsfiddle.net/asaxdq6p/6/

I am trying to achieve effect like this:
http://maciej.kuzniczysko.pl/images/stackoverflow-1.jpeg
I am using Equal Height Columns with Cross-Browser CSS trick to have two columns the same height. 
Problem is I won't use JS (sidebar width) or CSS3 (calc).  It's going to be website mainly for old people and it have to work as expected even if person have old browser/doesn't use JS (as it's often in Poland for old people). 
Also it have to be structure properly (I mean that text-browsers will display it logically like at the moment). 
Question is, it's possible? 
Maximum page width is 1400px and it's centered with margin auto. 
First column is sidebar, that is 28.5% of page width (gives 400px when page reached 1400px), it's no fixed width (usually 300-400px as I am building responsive website). 
Second column is content area, that is 71.5% (rest of, gives maximum 1000px). 
What I want? 
To start background after sidebar on the screen - so it's always more than 50% of body + difference between page center and end sidebar position. 
It have to start exactly on expected position due Equal Height Columns (otherwise it cover background for sidebar). 
Then it could overflow, I don't care. 
Problem is difference between page center and end sidebar position is not fixed, so as I set it to 300px (1400px/2 = 700px; 700px - 400px = 300px), it's broken when page have less than 1400px width. 
Ok, too many talking. 
There is JSFiddle what I am talking about and as far I've done (commented of course). 
Alternatively I could set some height: 100% with position: relative to make sidebar cover a little of background by setting body's background color to sidebar. 
But I am not sure that is the only way. 
Thanks in advance for every advice or suggestions! 

A:

Is this what you're trying to achieve? 
HTML
<div class="wrapper">
  <div class="sidebar"></div>
  <div class="main">
    <div class="content"></div>
  </div>
</div>

CSS
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.wrapper {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    max-width: 1400px;
}
.sidebar {
    height: 100%;
    width: 28.5%;
    background-color: gray;
    float: left;
}
.main {
    float: left;
    width: 71.5%;
    height: 100%;
    background: url("http://www.etapetki.com.pl/wp-content/uploads/2014/01/kosmos.jpg") 0 50%/cover no-repeat fixed #787878;
    padding: 5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content {
    width: 100%;
    height: 100%;
    background-color: gray;
}

Also you can remove height: 100% from .content

