CODEWITHSUNDEEP
htmlcss
Ken Jenningson
Ken Jenningson

Reputation: 109

Putting 2 divs side by side with image+text

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/

Upvotes: 0

Views: 6224

Answers (3)

Robbendebiene
Robbendebiene

Reputation: 4899

  1. Solution would be to use display: block and float: left or float: right instead. See jsfiddle here.

  2. 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.

  3. Do it in the good old fashioned way with table layout: display: table for parent and display: table-cell for children. See jsfiddle here.

Upvotes: 1

iMarkDesigns
iMarkDesigns

Reputation: 1262

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;
}

Upvotes: 0

Sanderfish
Sanderfish

Reputation: 1530

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">

Upvotes: 1

Related Questions