Databases
StackOverflow2013
Postsdbo
POMultiple sized scalable grid of divs
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMultiple sized scalable grid of divs
    text
    copied!<p>I'm working on a 4 column grid of divs, that when the browser size is reduced all the divs are scaled down in size in ratio.<br> The problem is I want to have 2 div sizes within the grid (big and small), i.e. the big div is the width of 2 columns, while the small div is the width of one.<br> Here's my code and the problem I'm having:<br> HTML:</p> <pre><code>&lt;div id="thumb-wrap"&gt; &lt;div id="thumb-container-2"&gt; &lt;div class="thumb-dummy"&gt;&lt;/div&gt; &lt;div class="thumb-element" style="background-color: #ffe413;"&gt; some text &lt;/div&gt; &lt;/div&gt; &lt;div id="thumb-container"&gt; &lt;div class="thumb-dummy"&gt;&lt;/div&gt; &lt;div class="thumb-element" style="background-color: #8ca4a5;"&gt; some text &lt;/div&gt; &lt;/div&gt; &lt;div id="thumb-container"&gt; &lt;div class="thumb-dummy"&gt;&lt;/div&gt; &lt;div class="thumb-element" style="background-color: #f9ded6;"&gt; some text &lt;/div&gt; &lt;/div&gt; &lt;div id="thumb-container"&gt; &lt;div class="thumb-dummy"&gt;&lt;/div&gt; &lt;div class="thumb-element" style="background-color: #f57882;"&gt; some text &lt;/div&gt; &lt;/div&gt; &lt;div id="thumb-container"&gt; &lt;div class="thumb-dummy"&gt;&lt;/div&gt; &lt;div class="thumb-element" style="background-color: #eaebe6;"&gt; some text &lt;/div&gt; &lt;/div&gt; &lt;div id="thumb-container"&gt; &lt;div class="thumb-dummy"&gt;&lt;/div&gt; &lt;div class="thumb-element" style="background-color: #ffe93b;"&gt; some text &lt;/div&gt; &lt;/div&gt; &lt;div id="thumb-container"&gt; &lt;div class="thumb-dummy"&gt;&lt;/div&gt; &lt;div class="thumb-element" style="background-color: #f3f3f4;"&gt; some text &lt;/div&gt; &lt;/div&gt; &lt;div id="thumb-container"&gt; &lt;div class="thumb-dummy"&gt;&lt;/div&gt; &lt;div class="thumb-element" style="background-color: #003738;"&gt; some text &lt;/div&gt; &lt;/div&gt; &lt;div id="thumb-container"&gt; &lt;div class="thumb-dummy"&gt;&lt;/div&gt; &lt;div class="thumb-element" style="background-color: #939597;"&gt; some text &lt;/div&gt; &lt;/div&gt; &lt;div id="thumb-container"&gt; &lt;div class="thumb-dummy"&gt;&lt;/div&gt; &lt;div class="thumb-element" style="background-color: #e6e7e0;"&gt; some text &lt;/div&gt; &lt;/div&gt; &lt;div id="thumb-container"&gt; &lt;div class="thumb-dummy"&gt;&lt;/div&gt; &lt;div class="thumb-element" style="background-color: #f14e5b;"&gt; some text &lt;/div&gt; &lt;/div&gt; &lt;div id="thumb-container"&gt; &lt;div class="thumb-dummy"&gt;&lt;/div&gt; &lt;div class="thumb-element" style="background-color: #de4d79;"&gt; some text &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#thumb-wrap { position: absolute; width: 95%; left: 3%; top: 40px; font-family:'Neuzeit S LT W01 Book', Helvetica, sans-serif; font-size: 14px; padding-bottom: 150px; } #thumb-wrap a { opacity: 1.0; } #thumb-wrap a:hover { opacity: 0.6; text-decoration: none; } #thumb-container { display: inline-block; position: relative; width: 24%; padding-left: 0.5%; } #thumb-container-2 { display: inline-block; position: relative; width: 49%; padding-left: 0.5%; } .thumb-dummy { padding-top: 66%; } .thumb-element { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; border: 2px solid white; padding-top: 19px; background: no-repeat 50% 50%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } </code></pre> <p>Here's a working demo jsfiddle here too: <a href="http://jsfiddle.net/jzgSP/" rel="nofollow">http://jsfiddle.net/jzgSP/</a> <br>As you can see, the problem I'm having is that when a bigger div size is introduced, the smaller divs are aligning to the bottom, instead of all fitting nicely into the grid and sitting flush with the top of the page.<br> I have used the masonry / isotope plugins before, but I'm not sure they're relevant for something like this really. I'm not sure what the best solution is.</p>
 

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