I have a zencart and I want to have a 2 responsive divs inside a parent div. At the moment they are responsive but on a pc screen the content sits on top of the buttons instead of side by side. See here http://www.kinectwebdesign.com/ingleburncashexchange/ I have an attached an image of what it currently looks like. <div id="defineDiv"> <div id="defineMainLeft"> TEXT IS IN THIS DIV blah blah. </div> <div id="defineMainRight"> <a href="javascript:void(0);" class="service_item" alt="" data-animated="bounceIn"> <div class="icon_block icon1"></div> <h4>Hock Your Car</h4> </a> <a href="javascript:void(0);" class="service_item" alt="" data-animated="bounceIn"> <div class="icon_block icon2"></div> <h4>Items for Sale</h4> </a> <a href="javascript:void(0);" class="service_item" alt="" data-animated="bounceIn"> <div class="icon_block icon3"></div> <h4>Sell Your Goods</h4> </a> <a href="javascript:void(0);" class="service_item" alt="" data-animated="bounceIn"> <div class="icon_block icon4"></div> <h4>Cash Loans</h4> </a> </div> </div> Code (markup): .defineDiv, .defineMainLeft, .defineMainRight { //change the box model for simplicity -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .defineDiv { font-size: 1em; padding: 1.5em; width: 100%; } .mainContent, .defineMainRight { display: inline-block; vertical-align: top; width: 100%; } @media (min-width: 700px) { .defineMainLeft { margin-right: 5%; width: 60%; } .defineMainRight { width: 35%; } } Code (CSS):
This gave me the solution. http://www.webdesignerdepot.com/2014/07/the-secret-to-designing-website-layouts-without-css-floats/ I think I had one of my divs in the html missing or not named correctly. Hope it helps someone.