Databases
StackOverflow2013
Postsdbo
POHow do I make a div dynamically change to content width AND have it remain that width even as the browser window changes size?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I make a div dynamically change to content width AND have it remain that width even as the browser window changes size?
    primarykey
    data
    text
    <p>first time posting here.</p> <p>I've spent two days trying to figure this out, finally decided to ask here.</p> <p>Take a look at this: (Scenario 1)</p> <pre><code>#container { height:150px; border:1px solid pink; width:1100px; } #widget { display:inline-block; width:100px; height:100px; background-color:red; }​ </code></pre> <p><a href="http://jsfiddle.net/DQFja/1/" rel="noreferrer">http://jsfiddle.net/DQFja/1/</a></p> <p>Very simple. A div with a bunch of other divs within it. Parent div has a fixed width of ~1000 pixels, children divs are set to display:inline-block; When you make the browser window smaller than the parent, a scroll bar appears and you can scroll to see the rest.</p> <p>Now take a look at this: (Scenario 2)</p> <pre><code>#container { height:150px; border:1px solid pink; float:left; } #widget { display:inline-block; width:100px; height:100px; background-color:red; }​ </code></pre> <p><a href="http://jsfiddle.net/zZRq7/" rel="noreferrer">http://jsfiddle.net/zZRq7/</a></p> <p>Same parent and children, but the width of the parent is dynamically determined by the number of div children you place in it. Which is dandy. However, when you make the browser window smaller, the parent div becomes as wide as the window and the children start wrapping around, making the parent taller (Even though we set a fixed height!)</p> <p>SO:</p> <p>How do I make the parent div BOTH dynamic in width as in scenario 2, but then also keep its shape/height/width when the browser window gets smaller so we can get a scrollbar?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USDaniel F. Dietzel
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow do I make a div dynamically change to content width AND have it remain that width even as the browser window changes size?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow do I make a div dynamically change to content width AND have it remain that width even as the browser window changes size?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow do I make a div dynamically change to content width AND have it remain that width even as the browser window changes size?
      1. USSouta
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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