Sumant Singh Sumant Singh - 5 months ago 16
CSS Question

Trying to float two div but having issues

I tried aligning two divs in a single line. Used float left property and everything went good. But when I used images inside the div then it started creating issue.

So here is my example code:-

<div class="parent">
<div class="child-left">
<span>Some heading</span><br>
<img src="https://i.stack.imgur.com/PYeyz.png" />
</div>
<div class="child-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante nisi, cursus mattis lectus vel, tempor viverra enim. Duis finibus ultricies elit, eget convallis ligula sollicitudin ut. Aliquam in lorem vitae sem egestas tempor sit amet in ipsum. Duis sed turpis vestibulum, venenatis felis sed, pharetra nibh. Sed tempor, dui ac laoreet feugiat, purus velit auctor lorem, ac varius nisl mauris sit amet dui. Sed ut dapibus urna. Cras et sem eu arcu laoreet mollis.
</div>
<div class="child-left">
<span>Some heading</span><br>
<img src="https://i.stack.imgur.com/PYeyz.png" />
</div>
<div class="child-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante nisi, cursus mattis lectus vel, tempor viverra enim. Duis finibus ultricies elit, eget convallis ligula sollicitudin ut.
</div>
</div>


CSS

.parent {
width: 100%; }

.child-left {
float: left;
width: 30%; }

.child-right {
width: 70%;
float: left; }


So as you can see it's overlapping because the height of text area is not same as image height. Min-height property is not a good solution as I tried that.
So far I'm using table but this is not the best solution too. So what are my options?

Answer Source

Add this css class:

img{width:100%;}
.child-left:nth-child(odd){clear:left;}

Here example

.parent {
width: 100%; }

.child-left {
float: left;
width: 30%; }

.child-right {
width: 70%;
float: left; }
img{width:100%;}
.child-left:nth-child(odd){clear:left;}
<div class="parent">
   <div class="child-left">
        <span>Some heading</span><br>
        <img src="https://i.stack.imgur.com/PYeyz.png" />
   </div>
   <div class="child-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante nisi, cursus mattis lectus vel, tempor viverra enim. Duis finibus ultricies elit, eget convallis ligula sollicitudin ut. Aliquam in lorem vitae sem egestas tempor sit amet in ipsum. Duis sed turpis vestibulum, venenatis felis sed, pharetra nibh. Sed tempor, dui ac laoreet feugiat, purus velit auctor lorem, ac varius nisl mauris sit amet dui. Sed ut dapibus urna. Cras et sem eu arcu laoreet mollis.
    </div>
    <div class="child-left">
        <span>Some heading</span><br>
        <img src="https://i.stack.imgur.com/PYeyz.png" />
    </div>
    <div class="child-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante nisi, cursus mattis lectus vel, tempor viverra enim. Duis finibus ultricies elit, eget convallis ligula sollicitudin ut. 
    </div>
</div>