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?

Page Layout

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>

So, I have to to float the `sub-navigation` and `main-container`? — Boris, Apr 19 '12 at 00:50
As an aside, you might want to rethink using `points` for `font-size`. — steveax, Apr 19 '12 at 00:52
@steveax, not sure what you mean. Points are not desirable units for font size? Could you explain please? — Boris, Apr 19 '12 at 01:00
`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](http://css-tricks.com/css-font-size/), [and another](http://www.w3.org/QA/Tips/font-size). — steveax, Apr 19 '12 at 01:05

score 9 · Accepted Answer · edited Apr 19 '12 at 02:23

9

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

edited Apr 19 '12 at 02:23

steveax

17,527
6
44
59

answered Apr 19 '12 at 00:51

Ben

13,297
4
47
68

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. – Lazerblade Apr 19 '12 at 01:12
@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) – Ben Apr 19 '12 at 01:32
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. – Lazerblade Apr 19 '12 at 01:35
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. – Lazerblade Apr 19 '12 at 02:10
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. – Ben Apr 19 '12 at 02:25
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. – melkamo Apr 19 '12 at 04:59

score 1 · Answer 2 · answered Apr 19 '12 at 00:51

1

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.

answered Apr 19 '12 at 00:51

Niet the Dark Absol

320,036
81
464
592

score 0 · Answer 3 · answered Apr 19 '12 at 00:55

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

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! — Boris, Apr 19 '12 at 00:59

score 0 · Answer 4 · answered Aug 29 '13 at 01:08

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.

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

4 Answers4

Linked