html - How to make three DIV align vertical if not enough space horizontal -

html - How to make three DIV align vertical if not enough space horizontal -

i have next div in asp.net page:

<div style="width: 98%; padding: 2%; overflow: auto; height: auto; margin: 0 auto;"> <div style="float: left; width: 32%;"> <cms:contentblock id="contentblock2" runat="server" cssclass="test1 green" defaultcontentid="638" clientidmode="static" /> </div> <div style="float: left; width: 32%;"> <cms:contentblock id="contentblock3" runat="server" cssclass="test1 green" defaultcontentid="638" clientidmode="static" /> </div> <div style="float: left; width: 32%;"> <cms:contentblock id="contentblock4" runat="server" cssclass="test1 green" defaultcontentid="638" clientidmode="static" /> </div> </div>

the above generated in html:

<div style="width: 98%; padding: 2%; overflow: auto; height: auto; margin: 0 auto;"> <div style="float: left; width: 32%;"> <div id="contentblock2" class="test1 green"> <p align="center"><span class="info" align="left"><strong>regular hours:</strong><br />monday&#160;- friday: 8am - 9pm<br />saturday&#160;&amp; sunday: 9am - 5pm</span> <br /><span class="info" align="left"><a title="most insurance plans accepted" href="/participating_insuran">most insurance plans accepted</a><br />914-848-5644</span></p> </div> </div> <div style="float: left; width: 32%;"> <div id="contentblock3" class="test1 green"> <p align="center"><span class="info" align="left"><strong>regular hours:</strong><br />monday&#160;- friday: 8am - 9pm<br />saturday&#160;&amp; sunday: 9am - 5pm</span> <br /><span class="info" align="left"><a title="most insurance plans accepted" href="/participating_insuran">most insurance plans accepted</a><br />914-848-4544</span></p> </div> </div> <div style="float: left; width: 32%;"> <div id="contentblock4" class="test1 green"> <p align="center"><span class="info" align="left"><strong>regular hours:</strong><br />monday&#160;- friday: 8am - 9pm<br />saturday&#160;&amp; sunday: 9am - 5pm</span> <br /><span class="info" align="left"><a title="most insurance plans accepted" href="/participating_insuran">most insurance plans accepted</a><br />914-848-45455</span></p> </div> </div> </div>

css:

.test1 { text-align: left; background: #b6ff00; } .test1 p { text-align: left; }

seeing in desktop browser fine across screen:

when create browser smaller displayed this:

what looking after breakpoint of width, them go vertically instead of maintain squeezing them shown in sec image. pretty much want them stack 1 below other vertically.

how create them go vertically browser size gets smaller?

you add together media query set 100% width div @ browser width.

example:

@media , (max-width: 500px) { .test1 { width: 100%; } }

fiddle: http://jsfiddle.net/31xqrk9d/

html css responsive-design