css - Dynamically align on center divs inside another div with dynamically changing height -
i cant find solution problem, asking help... have 1 div changing height depending on browser window height. inside of div 5 divs 4 per line, when resize window size smaller size divs fall down on line 2, 3, etc. that´s good, these divs arent in middle of main div resized , looking for... thank you
html:
<div id="main"> <!--div1--> <div class="mosaic-block fade"> </div> <!--div2--> <div class="mosaic-block fade"> </div> <!--div3--> <div class="mosaic-block fade"> </div> <!--div4--> <div class="mosaic-block fade"> </div> <!--div5--> <div class="mosaic-block fade"> </div> </div> <!--main-->
css:
div#main { border: #cccccc thin solid; max width: 840px; height:600px; min-width: 210px; border: #cccccc thin solid; margin:0 auto; max-width: 840px; } .mosaic-block { margin-bottom:50px; position: relative; float:left; margin:4px; top:50px; overflow:hidden; width:200px; height:200px; background:#111 url(../img/progress.gif) no-repeat center center; border:1px solid #fff; -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); }
instead of float:left;
.mosaic-block, might want try display:inline-block;
, adding text-align:center;
main. it's bit dirty, works !
ps. might want remove max width: 840px;
, doubt it's valid declaration !
Comments
Post a Comment