Is it possible for inline-block element to auto fill the available width?

Question

I have a <div id="content">, which contains <div id="sub-navigation> and <div id="main container">, which themselves are inline-blocks. I would like to be able to make the main container fill the rest of the available page width. Is that possible?

I need columns-strip to expand or shrink based on the number and width of column elements. If the width of the columns-strip exceeds the width of the main container, then a horizontal scroll bar should appear.

* {
      margin: 0px;
      padding: 0px;
      font-size: 10pt;
      white-space: normal; 
    }

    #wrapper {
      margin: 0px 20px; 
      background-color: red;
    }

    #header {
      margin: 25px 10px 10px 10px;
      height: 50px; 
      background-color: purple;
      color: white;
    }

    #content {
      margin: 10px; 
      padding: 10px; 
      font-size: 0pt; 
      white-space: nowrap; 
      overflow: hidden; 
      background-color: white;
    }

    #sub-navigation {
      width: 200px; 
      height: 150px; 
      display: inline-block; 
      vertical-align: top; 
      background-color: forestgreen; 
      color: white;
    }

    #main-container {
      padding: 10px; 
      display: inline-block; 
      overflow: auto; 
      background-color: yellow;
    }

    #columns-strip {
      padding: 10px; 
      font-size: 0pt; 
      white-space: nowrap; 
      background-color: mediumturquoise;
    }

    .posts-column {
      margin: 0px; 
      width: 200px; 
      height: 200px; 
      display: inline-block; 
      vertical-align: top; 
      overflow: auto;
    }

    #footer {
      margin: 10px 10px 25px 10px; 
      height: 50px; 
      background-color: navy;
    }

<div id="wrapper">
  <div id="header"></div>  
  <div id="content">    
    <div id="sub-navigation"></div>    
    <div id="main-container">
      <div id="columns-strip">    
        <div class="posts-column" style="background-color: lightgray;"></div>
        <div class="posts-column" style="background-color: darkgray;"></div>
        <div class="posts-column" style="background-color: gray;"></div>
      </div>
    </div>
  </div>
  <div id="footer"></div>
</div>

Answer 1

You have to remove the inline-block styles and float the #sub-navigation div. inline-block is not suited for what you are trying to achieve. When you add no display styles, the div element will be the default value which is block, block elements take up all the available space by default. By floating the #sub-navigation element you make it only take up the space required for its contents.

#sub-navigation {
  width: 200px; 
  height: 150px; 
  float : left;
  vertical-align: top; 
  background-color: forestgreen; 
  color: white;
}

#main-container {
  padding: 10px;        
  overflow: auto; 
  background-color: yellow;
}

make sure to add a clear: left element after the #main-container