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>

Guesthouse

Not with inline-block and without JavaScript, no. – Tagliatelle

So, I have to to float the sub-navigation and main-container? – Guesthouse

As an aside, you might want to rethink using points for font-size. – Brenner

@steveax, not sure what you mean. Points are not desirable units for font size? Could you explain please? – Guesthouse

point is kinda meaningless on a screen and is really only recommended for a print style sheet. You'll get wildly different font sizes when points on a screen. Lot's of info out on the interwebs, here's one, and another. – Brenner

@Brenner thanks a lot, I learned something! – Guesthouse

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

Keystroke

The only problem with this is that if main-content has no definition as a div it will be 100%, which means it'll be inserted below sub-navigation. – Indistinctive

@Lazerblade: what do you mean by definition as a div? the div will only be displayed below the #sub-navigation if its content doesnt allow for it to be displayed next to it (for example if you specify width, insert large images or a ridiculous url) – Keystroke

Produce a fiddle where the main-container sits beside the subnavigation div without specifying width for the main-container but where the main-container fills the wrapper width not occupied by the sub-navigation, without using javacript. – Indistinctive

I'm impressed. Just one thing. Where's the border / gap between the columns and the main container, like in the OP's picture? The inner column container shows color on the right, but it's covered by the column. I am impressed, don't get me wrong, but it is flawed. – Indistinctive

The element overflows because the content of the div has a fixed width. A overflow-y: auto on ``#columns-strip` would fix that if you want to go with fixed width colums. You're right, theres no stretchy right side, but that can be done with a margin-right on #main-container tough you're probably better off here with a responsive layout. – Keystroke

As an alternative to this perfectly correct float solution, you can use two absolute positions inside relative position. There are then two ways of making that work (both suitable for different purposes): one is using a margin-left for your right, expandable div; the other is setting the appropriate right and left values. – Flatter

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.

Sensation

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

Indistinctive

Agreed. I want header and footer to stretch to the browser frame (minus the margin), sub-navigation is fixed width, and the content is whatever is left between the right side of the sub-navigation and the right edge of the red div. Damn, I need a float! – Guesthouse

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.

Necrophobia