1

I'm trying to find a way to float max two centered divs at a time which automatically flow to one above the other if page is small or on mobile device. In other words max 2 items in a row, which will flow to 1 item per row if screen is small or most of all on mobile devices.

I've managed to get everything done except centering all divs

You can also check out the code below here http://jsfiddle.net/meetjs/LWr3T/

<div style="width: auto; margin: auto;">
<div style="float: left;">
<h2 style="text-align: center;"><strong><a title="top left" href="http://topleft">top left</a></strong></h2>
<p style="text-align: center;"><strong><a href="http://toleft/"><img class="aligncenter size-medium wp-image-20" title="top left" src="" alt="" width="250" height="250" /></a>
</strong></p>
</div>

<div style="float: left;">
<h2 style="text-align: center;"><strong><a title="top right" href="http://topright">top right</a></strong></h2>
<p style="text-align: center;"><strong><a href="http://topright"><img class="aligncenter size-medium wp-image-20" title="top right" src="" alt="" width="250" height="250" /></a>
</strong></p>
</div>

<div style="clear: both;"> </div>

<div style="width: auto; margin: auto;">
<div style="float: left;">
<h2 style="text-align: center;"><strong><a title="bottom left" href="http://bottomleft/">bottom left</a></strong></h2>
<p style="text-align: center;"><strong><a href="http://bottom left"><img class="aligncenter size-medium wp-image-20" title="bottom left" src="" alt="" width="250" height="250" /></a>
</strong></p>
</div>

<div style="float: left;">
<h2 style="text-align: center;"><strong><a title="bottom right" href="http://bottomright/">bottom right</a></strong></h2>
<p style="text-align: center;"><strong><a href="http://bottom right"><img class="aligncenter size-medium wp-image-20" title="bottom right" src="" alt="" width="250" height="250" /></a>
</strong></p>

</div>
</div>
</div>
Mark
  • 11
  • 2
  • I've changed `
    ` to `
    ` and it now centers, but I don't think it is the correct solution.
     – Mark Jan 05 '12 at 01:35
  • Alternatively I've found this `
    ` at this page [http://stackoverflow.com/questions/2439177/use-margin-auto-and-center-to-center-float-left-div] but don't know how to apply it.     – Mark Jan 05 '12 at 01:36
  • It already does that, just scale down your browser; the boxed collapse as the browser width is < the width of the two divs. However if this wasn't the case you could use media queries to clear the floats of each div when window reached 'x' width. – Jack Sep 24 '13 at 15:42

0 Answers0