Putting 2 divs side by side with image+text

Question

I'm trying to make 1 div with an image div and text below it, and beside it another one. Need it to be responsive later on.

For some reason making them 50% width makes them stack? I have to put them to 49.7%, and I don't know where the extra padding is coming from.

Here's what it is right now:

HTML:

<div class="center">
  <div class="home2">
    <div class="home2_first">
      <img src="Images/home_pic1.png" />
      <p>Lorem Ipsum is simply dummy text!</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
  </div>

  <div class="home2">
    <div class="home2_second">
      <img src="Images/home_pic2.png" />
      <p>Lorem Ipsum is simply dummy text!</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
  </div>
</div>

CSS:

.home2 {
  margin: 0 auto;
  width: 49.7%;
  text-align: center;
  display: inline-block;
  background-color: red;
  height: 400px;
}

.home2 p {
  font-family: 'cabinRegular', arial, sans-serif, verdana;
  color: #000000;
  font-size: 18px;
}

.center {
  margin: 0 auto;
  width: 100%;
  background-color: blue;
}

.home2_first img {
  margin: 0 auto;
  padding: 0;
}

.home2_second img {
  margin: 0 auto;
  padding: 0;
}

https://jsfiddle.net/Lq5vLdrm/7/

score 1 · Answer 1 · edited May 23 '17 at 12:14

1

An answer is found on multiple places on Stack Overflow, of which this one is accurate: Two inline-block, width 50% elements wrap to second line

The issue appears because the display: inline-block property takes in account white-space in HTML.

A possible fix would be to remove the space between the closing tag of the first container and the opening tag of the second, like this:

</div><div class="home2">

Or you could place them like this:

</div><!--

--><div class="home2">

edited May 23 '17 at 12:14

Community

1
1

answered Aug 01 '16 at 22:43

Sanderfish

1,470
1
12
15

This worked as well, never knew about the inline-block taking the html white space into account, thanks! – Ken Jenningson Aug 01 '16 at 23:07

Robbendebiene · Accepted Answer · 2016-08-02T08:53:46.223

1

Solution would be to use display: block and float: left or float: right instead. See jsfiddle here.
Use flexbox, which i would prefer: Just give the parent container: display: flex; flex-flow: row; and remove the display: inline-block property from it's children or set it to display: block. See jsfiddle here.
Do it in the good old fashioned way with table layout: display: table for parent and display: table-cell for children. See jsfiddle here.

edited Aug 02 '16 at 08:53

answered Aug 01 '16 at 23:01

Robbendebiene

4,215
3
28
35

Thanks that's exactly what I needed, I was adding the float to the wrong styles. – Ken Jenningson Aug 01 '16 at 23:07

score 0 · Answer 3 · answered Aug 01 '16 at 22:59

I assume display: inline-block have lack of supporting the full container, perhaps you could add float: left; to your class .home2 to supply a solid container. Then on your @media provide the desired width.

Here's the sample code.

.home2 {
  margin: 0 auto;
  width: 50%;
  text-align: center;
  float: left;
  display: inline-block;
  background-color: red;
  height: 400px;
}

Putting 2 divs side by side with image+text

3 Answers3