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.
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.
Here's my code and the problem I'm having:
HTML:\[code\]<div id="thumb-wrap"> <div id="thumb-container-2"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #ffe413;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #8ca4a5;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #f9ded6;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #f57882;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #eaebe6;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #ffe93b;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #f3f3f4;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #003738;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #939597;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #e6e7e0;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #f14e5b;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #de4d79;"> some text </div> </div> </div>\[/code\]CSS:\[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\]Here's a working demo jsfiddle here too: http://jsfiddle.net/jzgSP/
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.
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.
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.
Here's my code and the problem I'm having:
HTML:\[code\]<div id="thumb-wrap"> <div id="thumb-container-2"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #ffe413;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #8ca4a5;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #f9ded6;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #f57882;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #eaebe6;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #ffe93b;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #f3f3f4;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #003738;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #939597;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #e6e7e0;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #f14e5b;"> some text </div> </div> <div id="thumb-container"> <div class="thumb-dummy"></div> <div class="thumb-element" style="background-color: #de4d79;"> some text </div> </div> </div>\[/code\]CSS:\[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\]Here's a working demo jsfiddle here too: http://jsfiddle.net/jzgSP/
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.
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.