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 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.

CSS:

* {
  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;
}

HTML:

<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

Answer 2

That's not how inline-blocks are supposed to be used. Best thing to do here is make your navigation box float:left and leave the default display value alone.

Answer 3

If your header, footer and wrapper have specific widths, then yes, you can have your main-container fill the available space. But if you're not specifying widths in your CSS, then you need to determine how big your main-container CAN be based on the rendered width of the containing element (wrapper). The only way to determine that width after the page loads is with javascript. If you want your site to have a dynamic width but still have your content (sub-navigation and main-container) fill the screen, you would either need to use javascript or percentages, and percentages can get ugly when you start looking at varying resolutions of monitors, laptops, etc...

Answer 4

Ever heard of flex box model!!

It is made just for that.

Note in flexbox model all child elements act as flex box model you cant opt out certain things. Which mean if page has navigation and under it content div + side div. You can't make top navigation out of it. Which has implications. So solution is to have all things only that need flex box in one div.