How to Make an Inline-Block Element Fill the Remainder of the Line

Make an inline-block div take 100% of the remaining width

I believe if you don't want to specify any pixel or percentage widths at all and make the red and green containers only as wide as their content, you will need to wrap them inside their own container, named .left below:

<div class="container">
    <div class="left">
        <div class="red">Red</div>
        <div class="green">green</div>
    </div>
    <div class="blue">blue</div>
</div>

If you now float .left to the left, and also float .left div to the left, you now no longer need to specify any inline-block elements. The blue container will simply take up as much space as it has available until the end of the .container.

.left {
    float: left;
}

.left div {
    float: left;
}

Fiddle

Edit

Silly me, the .left container is obviously not needed as long as you just add float: left to your red and green blocks, just like @Ennui said above in the comments :)

Updated fiddle

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

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

css make inline-block elements span the whole width of container

It's now 2016 and I wanted to update this question with an answer using flexbox. Consult with CanIUse for browser-compatiblity.

/* Important styles */ul {  display: flex;}li {  flex: 1 1 100%;  text-align: center;}
/* Optional demo styles */* {  margin: 0;  padding: 0;}ul {  margin-top: 2em;  justify-content: space-around;  list-style: none;  font-family: Verdana, sans-serif;}li {  padding: 1em 0;  align-items: center;  background-color: cornflowerblue;  color: #fff;}li:nth-child(even) {  background-color: #9980FA;}

<ul>  <li>text</li>  <li>text</li>  <li>text</li>  <li>text</li></ul>

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

.flex-item {
  -webkit-flex: 1 auto;
  flex: 1 auto;
  vertical-align: middle;
}

.flex-item-fixed {
  -webkit-flex: 0 70px;
  flex: 0 70px;
  text-align: center;
}

.flex-item-fixed1 {
  -webkit-flex: 0 10%;
  flex: 0 10%;
}

.left {
  background-color: #D82B38;
  display: block;
  border-radius: 0 15px 0 0;
  height: 30px;
}

.right {
  background-color: #D82B38;
  height: 30px;
  display: inline-block;
  float: right;
  border-radius: 0 0 0 15px;
}

.ib {
  border: 1px solid #333;
  display: inline-block;
  padding: 3px;
}

.block-start {
  display: inline;
  padding: 3px;
  white-space: pre-wrap;
}
/* Create the break line */
.block-start:not(:first-child):before {
  content: "\A";
}

/* to rectify the position of the first one*/
.block-start:first-child {
  padding-left: 0;
}

<div class="container">
  <div class="block-start">block-start</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="block-start">block-start</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="block-start">block-start</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
</div>

<div id="wrapper">
    <div id="right"></div>
    <div id="left"></div>
    <div id="middle"></div>
</div>

#wrapper {
    width: 100%;
}
#left {
    float: left;
    width: 50px;
}
#right {
    float: right;
    width: 50px;
}