Ken Jenningson Ken Jenningson - 4 months ago 9
HTML Question

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/

Answer

Another solution would be to use display: block and float: left or float: right instead.

See jsfiddle here.