Search code examples
cssresponsive-designcenter

CSS responsive design - center align two divs within containing fluid div

I have a website I need to make responsive.

I have a containing div which will be fluid and will have floating divs within the container which cannot change size, but would like them to stay in the center and have equal spacing. Anyone any ideas? They will be in rows of 3 at the beginning and will reduce to two and then one.

.container {width:100%; text-align:center;}
.qitem{display:block;text-align:left;float:left;width:320px; height:300px}
.qitem:nth-child(odd) {margin-right:1%;margin-left:10%;}
.qitem:nth-child(even){margin-right:10%;margin-left:1%;}
Solution

  • this works nicely 

     .qitem{display: inline-block;text-align:left;float:none;width:320px; height:300px}