1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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):

    SEMrush
     

    Attached Files:

    pizzazz_zazz, Nov 22, 2015 IP
    SEMrush
  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