Trying to float two div but having issues

Question

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?

Well if you want it to be on the right of your `div` then probably. I'm trying to gauge what exactly you're going for. Do you want to align them beside each other or above/below one another? — Luke Danger Kozorosky, Jun 20 '17 at 18:49
Trying to align in single line not vertically but horizontally. — Sumant Singh, Jun 20 '17 at 18:55
Possible duplicate of [How do I keep two divs that are side by side the same height?](https://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height) — Michael, Jun 20 '17 at 20:00

score 0 · Accepted Answer · answered Jun 20 '17 at 18:40

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>

Worked perfectly! I'm still learning and if you can provide me some more information or any help link about this property then it would be of great help. :) — Sumant Singh, Jun 20 '17 at 19:01

score 0 · Answer 2 · answered Jun 20 '17 at 18:50

You can use clear:both after showing two div in single line. Check snippet.

.parent {
  width: 100%;
}

img {
  width: 100%;
}

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

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

#clear {
  clear: both;
}

<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 id="clear"></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>

This worked, though I got my answer already. Thanks for giving additional information. :) — Sumant Singh, Jun 20 '17 at 19:03
@SumantSingh If you feel the answer is correct you can up vote to help others. — Nimish, Jun 20 '17 at 19:04

score 0 · Answer 3 · answered Jun 20 '17 at 18:59

0

I'd suggest you to clear the floats after each pair. Use this CSS to make it works:

.child-right:after {
   display: block;
   content: '.';
   height: 0px;
   overflow: hidden;
   text-indent: -9999px;
}

answered Jun 20 '17 at 18:59

TamirNahum

484
2
8

Trying to float two div but having issues

3 Answers3