jquery - Scale up inner divs height , width according to outer div and decrease the no. of inner divs -
i have 3 as divided vertical divs having many divs within each of vertical divs follows.
i want inner divs wrap 2 column or 1 column grid (depending on browser height width) each divs height width increasing on browser resize. presently divs wrap around still space left , want inner divs increment in size browser size decreasing filling space.
here image when resize browser
my html follows
<html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> 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; } </style> </head> <body> <div class="main"> <div class="verticalreports"> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> </div> <div class="verticalreports"> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> </div> <div class="verticalreports"> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> <div class="verticaltiles"></div> </div> </div> </body> </html>
try adding media queries @ breakpoints.
@media (max-width: 940px) { .verticaltiles { width: 45%; } } http://jsfiddle.net/ferne97/wh7kd/
might want responsive grids http://responsive.gs/ or http://www.gumbyframework.com/docs/grid
jquery html css
No comments:
Post a Comment