Keep div blocks in center of page when page is resized

irondude293

New Member
I would like to have it so when my page resizes the 'blocks' automatically go under each other so they can fit the page perfectly but then when they drop down the 'main' div they are in resizes as well so there is no left over space on the right side so it still looks nice?Thanks so much for the help! HTML\[code\]<html> <head> <!-- css --> <link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/15463159/main.css"> <title></title> </head> <body> <div class="main"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html>\[/code\]CSS\[code\]body{ background-color: #000;}.main{ width: 90%; height: 1000px; background-color: #fff; margin-right: auto; margin-left: auto; margin-top: 75px; margin-bottom: 75px;}.box{ width: 200px; height: 300px; background-color: #000; position: relative; left: 10px; float: left; margin-right: 5px; margin-left: 5px; margin-top: 10px;}\[/code\]
 
Back
Top