css width with an inline-block element

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>