layout not proper in small screen laptop

[rady_sakr]

• the layout is fine for 24 inch laptop...where as when i see it in 11 inch laptop the layout is not proper...the right column breaks down and moves downwards....

http://jsfiddle.net/ZrpLT/92/embedded/result/providing my code below\[code\]<div class="row" style="margin-left: 325px;"> <div class="span12 pagination-centered" style="font-style: arial; font-size: 21px; color: #cc0000; margin-bottom: 20px; padding-top: 113px;"> Main Menu </div> <div class="span5" style="margin-left: 97px; width: 493px;"> <div class="melonhtml5_gallery"> <div data-caption="<a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px; color: grey;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px; color: grey;' >Labels</a>" data-image="http://www.defie.co/designerImages/inventoryControl.png"></div> <div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/search.png"></div> <div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/yourfiles.png"></div> <div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/shareFiles.png"></div> <div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/custProfile.png"></div> <div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/custQuote.png"></div> <div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/salesOrders.png"></div> <div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/vendorProfile.png"></div> <div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/reports.png"></div> <div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/yourfiles.png"></div> <div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/admin.png"></div> <div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/shipLogistic.png"></div> <div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/accReceivable.png"></div> <div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/custRMA.png"></div> <div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/production.png"></div> <div data-caption="<a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' >Create</a> <div> <a style='margin-left: 92px; font-size: 18px;' >View/Edit</a> </div> <a style='margin-left: 92px; font-size: 18px;' >Labels</a>" data-image="http://www.defie.co/designerImages/png/CRM.png"></div> </div> </div> <div class="span5" style="margin-left: 65px; width: 493px;"> <div class="melonhtml5_gallery"> <div data-caption="" data-image="http://www.defie.co/designerImages/png/accPayable.png"></div> <div data-caption="" data-image="http://www.defie.co/designerImages/png/vendorRMA.png"></div> <div data-caption="" data-image="http://www.defie.co/designerImages/png/manuPlanning.png"></div> <div data-caption="" data-image="http://www.defie.co/designerImages/png/productLifeCycle.png"></div> <div data-caption="" data-image="http://www.defie.co/designerImages/png/multiMedia.png"></div> <div data-caption="" data-image="http://www.defie.co/designerImages/png/receiving.png"></div> <div data-caption="" data-image="http://www.defie.co/designerImages/png/tax.png"></div> <div data-caption="" data-image="http://www.defie.co/designerImages/png/admin.png"></div> <div data-caption="" data-image="http://www.defie.co/designerImages/png/ISOprocess.png"></div> <div data-caption="" data-image="http://www.defie.co/designerImages/png/intergration.png"></div> <div data-caption="" data-image="http://www.defie.co/designerImages/png/comDocuments.png"></div> <div data-caption="" data-image="/images/cubes/TBU4.png"></div> <div data-caption="" data-image="/images/cubes/TBU5.png"></div> <div data-caption="" data-image="/images/cubes/TBU5.png"></div> <div data-caption="" data-image="/images/cubes/TBU5.png"></div> <div data-caption="" data-image="/images/cubes/TBU5.png"></div> </div></div>\[/code\]