Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If I understand your desired behavior correctly, you <em>can</em> do this without setting static widths and retain your desire for horizontal scrolling.</p> <p><a href="http://codepen.io/cimmanon/pen/HCKEx" rel="nofollow">http://codepen.io/cimmanon/pen/HCKEx</a></p> <pre><code>#divfieldWidgets { max-width: 100%; /* modified */ margin-top:40px; background-color:#FFFFFF; border:1px solid gray; height:320px; -moz-box-shadow: 4px 4px 2px #888; -webkit-box-shadow: 4px 4px 2px #888; box-shadow: 4px 4px 2px #888; overflow:hidden; margin-left:60px; margin-right:60px; overflow-x:scroll; /* modified */ } .grouper { display: table-cell; } .grouper div { display: table-cell; } #divFieldWidgetsProductAndMarketing { background-color:#FFEEEE; } #divFieldWidgetsYears { background-color:#EEFFEE; } #divFieldWidgetsCalculations { background-color:#EEEEFF; } </code></pre> <p>The HTML:</p> <pre><code>&lt;div id="divfieldWidgets"&gt; &lt;div class="grouper"&gt;&lt;!-- added a class here --&gt; &lt;div id="divFieldWidgetsProductAndMarketing"&gt;a&lt;/div&gt; &lt;div id="divFieldWidgetsYears"&gt;b&lt;/div&gt; &lt;div id="divFieldWidgetsCalculations"&gt;c&lt;/div&gt; &lt;/div&gt; &lt;div class="grouper"&gt; &lt;div&gt;a&lt;/div&gt; &lt;div&gt;b&lt;/div&gt; &lt;div&gt;c&lt;/div&gt; &lt;div&gt;d&lt;/div&gt; &lt;div&gt;e&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The key is using <code>display: table-cell</code>. Your elements are forced to appear all in a row and their parent containers grow to contain them.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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