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

Question

I have a `

`, which contains `

`, 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:…

Accepted Answer

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`

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

Solution

Problem