Databases
StackOverflow2013
Postsdbo
POScale up inner divs height , width according to outer div and decrease the no. of inner divs
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POScale up inner divs height , width according to outer div and decrease the no. of inner divs
    primarykey
    data
    text
    <p>I have three equally divided vertical divs having many divs inside each of the vertical divs as follows.</p> <p><img src="https://i.stack.imgur.com/Wcf0T.png" alt="When browser is not resized"></p> <p>I want the inner divs to wrap to a 2 column or 1 column grid (depending on browser height width) with each divs height width increasing on browser resize. Presently the divs wrap around but still some extra space is left and I want the inner divs to increase in size with browser size decreasing filling that extra space.</p> <p>Here is the image when i resize the browser</p> <p><img src="https://i.stack.imgur.com/6AGvf.png" alt="after i resize the browser"></p> <p>My HTML is as follows</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt; &lt;style type="text/css"&gt; body { height: 100%; font-size: 100%; } .main { border: 2px solid black; position: absolute !important; width: 100% !important; height: 100% !important; left: 0px !important; top: 0px !important; z-index: 1 !important; box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; } .verticalReports { width: 32%; border: 1px solid black; height: 100%; float: left; overflow:hidden; } .verticalTiles { width: 30%; height: 20%; background-color: #e0d8ed; margin-left: 10px; margin-top: 13px; float: left; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="main"&gt; &lt;div class="verticalReports"&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="verticalReports"&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="verticalReports"&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;div class="verticalTiles"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. UStiger
    1. UStiger
    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. POScale up inner divs height , width according to outer div and decrease the no. of inner divs
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POScale up inner divs height , width according to outer div and decrease the no. of inner divs
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POScale up inner divs height , width according to outer div and decrease the no. of inner divs
      1. This table or related slice is empty.
      1. VTUpMod
    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