CODEWITHSUNDEEP
htmlcssresponsive-design
hannahbalector
hannahbalector

Reputation: 29

My div's overlap. I want them to be side-by-side, but also responsive

.center {
    text-align: center;
}

.box1 {
  display: inline-block;
  width: 30%;
  margin-left:10%;
  clear: both;
  height: 30%
}

#img1 {
    padding: 5%
}
<div class="center">
    <div class="box1">
        <img id="img1" src="http://i.imgur.com/D5T6lY1.png" />
    </div>
    <div class="box1">
        <p style="text-align:left">Choosing a new Point of Sale (POS) is an opportunity. Lavu is not just accepting payments - Lavu is business management on the iPad. Upgrade your business with the Cloud POS system that was developed specifically for the restaurant / hospitality industry. Lavu has the tools you need to improve efficiency and the bottom line. Love your business.</p>
        <div class="rounded-button"> 
            <a href="lavu.com" style="text-decoration: none">live demo<img id="terminal_icon" src="http://i.imgur.com/ZrCANdq.png"/>     </a>
        </div>
    </div>
</div>

Problem
I can't keep them from overlapping when I reduce the page width.
I want the 2 divs inside to "clear" each other instead of overlapping (also to be completely responsive).
I can't seem to achieve this effect.

Any suggestions?

Upvotes: 0

Views: 1218

Answers (4)

David Mork
David Mork

Reputation: 101

You can to use a @media query for make it more responsive, the following jsfiddle demo shows how should be your code: http://jsfiddle.net/zb6xbf8m

Both 'min-width' and 'max-width' properties specified on the @media queries is a value that I have defined based on the dimensions of the content of both divs.

Upvotes: 0

Simon Arnold
Simon Arnold

Reputation: 16177

Force the childs of .box1 to respect the with of their parents with

.box1 > * {
  max-width: 100%;
}


.center {
    text-align: center;
}

.box1 {
  display: inline-block;
  width: 30%;
  margin-left:10%;
  clear: both;
  height: 30%
}

.box1 > * {
  max-width: 100%;
}

#img1 {
    padding: 5%
}
<div class="center">
    <div class="box1">
        <img id="img1" src="http://i.imgur.com/D5T6lY1.png" />
    </div>
    <div class="box1">
        <p style="text-align:left">Choosing a new Point of Sale (POS) is an opportunity. Lavu is not just accepting payments - Lavu is business management on the iPad. Upgrade your business with the Cloud POS system that was developed specifically for the restaurant / hospitality industry. Lavu has the tools you need to improve efficiency and the bottom line. Love your business.</p>
        <div class="rounded-button"> 
            <a href="lavu.com" style="text-decoration: none">live demo<img id="terminal_icon" src="http://i.imgur.com/ZrCANdq.png"/>     </a>
        </div>
    </div>
</div>

Upvotes: 2

wahwahwah
wahwahwah

Reputation: 3177

You can handle the image resize in css so to prevent overlapping:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

You might have to play around with the results to get exactly your desired effect as you change resolution.

Upvotes: 1

Tim Lewis
Tim Lewis

Reputation: 29278

I would use a framework. The one I'm most familiar with is Twitter Bootstrap. This is how simple your problem would be using that:

<div class="container-fluid"> // Create a full-width container
  <div class="row">
    <div class="col-xs-6"> // 50% Width of the row, made up of 12 Columns
      <img src="..."/>
    </div>
    <div class="col-xs-6">
      <p>Info text about POS System.</p>
    </div>
  </div>
</div

And it would be done. A container that resizes depending on the size of your browser's width, that is centered and does not overlap.

Unfortunately, this is also a bit of an opinion based question, and I don't have a good solution using base CSS.

Hopefully this gives you some insight though. Frameworks are there to make your life simple, and provide easy to use, complaint HTML/CSS layouts.

Cheers!

Upvotes: 0

Related Questions