Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make a set of images extend beyond width of container div?
    primarykey
    data
    text
    <p>I have a set of images that I would like to be aligned next to one another and extend beyond the width of the container div. The images are added dynamically so the width of each image is unknown. The outer DIV would have a width of something specific i.e. 790px, and the inner DIV's width should match the width of its contents. How would I go about doing this?</p> <p>Here's a bit of a quick sketch:</p> <pre><code>+---------------------------------+ |-+---+------+--+-----+----+------| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |-+---+------+--+-----+----+------| +---------------------------------+ |&lt; ||||||||| &gt;| +---------------------------------+ </code></pre> <p>Here's the code:</p> <pre><code>&lt;style type="text/css"&gt; &lt;!-- #sortableContainer { width: 790px; overflow: scroll; height:auto; } #sortableScroller { width: auto; } .sortableItem { float: left; height: 460px; padding: 0; margin: 0; } --&gt; &lt;/style&gt; &lt;div id="sortableContainer"&gt; &lt;div id="sortableScroller"&gt; &lt;img src='&lt;url&gt;' class='sortableItem' /&gt; &lt;img src='&lt;url&gt;' class='sortableItem' /&gt; &lt;img src='&lt;url&gt;' class='sortableItem' /&gt; &lt;img src='&lt;url&gt;' class='sortableItem' /&gt; &lt;img src='&lt;url&gt;' class='sortableItem' /&gt; &lt;img src='&lt;url&gt;' class='sortableItem' /&gt; &lt;img src='&lt;url&gt;' class='sortableItem' /&gt; &lt;img src='&lt;url&gt;' class='sortableItem' /&gt; &lt;img src='&lt;url&gt;' class='sortableItem' /&gt; &lt;img src='&lt;url&gt;' class='sortableItem' /&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
    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.
 

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