Databases
StackOverflow2013
Postsdbo
POIs it possible for inline-block element to auto fill the available width?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIs it possible for inline-block element to auto fill the available width?
    text
    copied!<p>I have a <code>&lt;div id="content"&gt;</code> which contains <code>&lt;div id="sub-navigation&gt;</code> and <code>&lt;div id="main container"&gt;</code>, which are inline-blocks. I would like to be able to make the <code>main container</code> fill the rest of the available page width. Is that possible?</p> <p><img src="https://i.stack.imgur.com/wr84z.png" alt="Palge Layout"></p> <p>I need <code>columns-strip</code> to expand or shrink based on the number and width of <code>column</code> elements. If the width of the <code>columns-strip</code> exceeds the width of the <code>main container</code>, then a horizontal scroll bar should appear.</p> <p>CSS:</p> <pre class="lang-css prettyprint-override"><code>* { 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; } </code></pre> <p>HTML:</p> <pre><code>&lt;div id="wrapper"&gt; &lt;div id="header"&gt;&lt;/div&gt; &lt;div id="content"&gt; &lt;div id="sub-navigation"&gt;&lt;/div&gt; &lt;div id="main-container"&gt; &lt;div id="columns-strip"&gt; &lt;div class="posts-column" style="background-color: lightgray;"&gt;&lt;/div&gt; &lt;div class="posts-column" style="background-color: darkgray;"&gt;&lt;/div&gt; &lt;div class="posts-column" style="background-color: gray;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload