Responsive divs not sitting side by side

Discussion in 'CSS' started by pizzazz_zazz, Nov 22, 2015.

  1. #1
    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):

     

    Attached Files:

    pizzazz_zazz, Nov 22, 2015 IP
  2. pizzazz_zazz

    pizzazz_zazz Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #2
    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.
     
    pizzazz_zazz, Nov 23, 2015 IP