css width with an inline-block element - html

Question

I'm trying to make a layout like this. All the banners have static dimensions and a bottom margin. And the article needs padding. The problem is the value of the width property of article. After locating the banners, I want to give the rest of the entire page width to article element. Here is my code:
#SidePane {
display: inline-block;
float: left;
}
.SideBanner {
display: block;
width: 250px;
height: 157px;
margin: 0 0 5px 0;
}
#SiteEye {
width: ???????????????????????;
height: 700px;
padding: 10px;
color: #4F2412;
background-color: #F9F6F4;
display: inline-block;
}
<div id="SiteCenter">
<div id="SiteEye">
<h1>title</h1>
<p>p1</p>
<p>p2</p>
</div>
<div id="SidePane">
<a href="">
<img class="SideBanner" src="images/banners/b1.jpg" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="images/banners/b2.jpg" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="images/banners/b3.jpg" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="images/banners/b4.jpg" alt="banner1" />
</a>
</div>
</div>

Answer 1

You may use calc method:
width: calc(100% - 250px);
See can i use calc? before using it for it's browser compatibility.

Answer 2

RE: Comment on Bhojendra's answer
There is another way, it involves using box-sizing:border-box;, one of the most useful additions to CSS, like, ever!
I've also updated your images to use a top padding on all except the first one because you were causing some white-space at the bottom of the page with the previous method.
* {
box-sizing:border-box; /* Make all height/width inclusive of padding and border */
}
body {
margin:0;
padding:0;
}
#SidePane {
display: inline-block;
float: left;
}
.SideBanner {
display: block;
width: 250px;
height: 175px;
padding: 5px 0 0 0;
}
#SidePane a:first-child .SideBanner {
padding:0;
}
#SiteEye {
width: calc(100% - 250px);
height: 700px;
color: #4F2412;
background-color: #F9F6F4;
display: inline-block;
padding:10px;
}
<div id="SiteCenter">
<div id="SiteEye">
<h1>title</h1>
<p>p1</p>
<p>p2</p>
</div>
<div id="SidePane">
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
</div>
</div>