how to adjust div height and width according to other div when float

Question

I have multiple div with property float left and width 50% because i want next div to be appear right to the current div and another div in bottom or next line. (I am printing it in foreach loop)

<div class="row" style="width:100%;">

<div class="" style="width:50%;float:left;">
  <div style="font-size:14px;color: #500050;">
    <p class="abc">ABC</p>
  </div>
  <div style="font-size: 12px;color: black;">
    <span>23:54</span>&nbsp;
    <span>ABC</span><br/>
    <span>dsds</span><br/>
    <span>dsfsafsaf sdsad ad</span>
  </div>
</div>

<div class="" style="width:50%;float:left;">
  <div style="font-size:14px;color: #500050;">
    <p class="">XYZ</p>
  </div>      
  <div style="font-size: 12px;color: black;">
    <span>time </span>&nbsp;
    <span>$value->type </span><br/>
    <span>subtype </span><br/>
    <span> description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj</span>
    <span> description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj</span>
    <span> description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj</span>
  </div>
</div>

<div class="" style="width:50%;float:left;">
  <div style="font-size:14px;color: #500050;">
    <p class="">PQR</p>
  </div>      
  <div style="font-size: 12px;color: black;">
    <span>time </span>&nbsp;
    <span>type </span><br/>
    <span> subtype </span><br/>
    <span> description </span>
  </div>
</div>

it is working fine till this but if second div height is more than first on then first div adjust its height equal to second div and third div appear below first div as follow

ABC                                XYZ
23:54  ABC                         time   $value->type
dsds                               subtype 
dsfsafsaf sdsad ad                 description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj 
                                   description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj 
                                   description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj
PQR 
time   type 
subtype 
description

but i want it as

ABC                                XYZ
23:54  ABC                         time   $value->type
dsds                               subtype 
dsfsafsaf sdsad ad                 description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj
                                   description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj description sjgdvhgsa 
PQR                                description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj description sjgdvhgsa
time   type 
subtype 
description

What should be done ?

For this you need too use masonary js https://masonry.desandro.com/, or use `abc` and `pqr` in one column — Awsme Sandy, Sep 21 '17 at 09:20
So to clarify, you don't want the vertical gap between div 1 and 3? — defteH, Sep 21 '17 at 09:21
well i am going to print it in loop...i mean in foreach loop @SuprajaGanji — Vishal B, Sep 21 '17 at 09:30
then instead of inline styles just give a class, them we can give it in css. I will update my answer — Supraja Ganji, Sep 21 '17 at 09:33

Supraja Ganji · Answer 1 · 2017-09-21T09:49:14.457

give float:right to second div instead of float: left

As you are using in a loop give class instead of inline styles and css

.block {
width: 50%;
}
.block:nth-child(odd) {
float: left;
}
.block:nth-child(even) {
float: right;
}

 

        <div class="row" style="width:100%;">
        
        <div class="block">
          <div style="font-size:14px;color: #500050;">
            <p class="abc">ABC</p>
          </div>
          <div style="font-size: 12px;color: black;">
            <span>23:54</span>&nbsp;
            <span>ABC</span><br/>
            <span>dsds</span><br/>
            <span>dsfsafsaf sdsad ad</span>
          </div>
        </div>
        
        <div class="block">
          <div style="font-size:14px;color: #500050;">
            <p class="">XYZ</p>
          </div>      
          <div style="font-size: 12px;color: black;">
            <span>time </span>&nbsp;
            <span>$value->type </span><br/>
            <span>subtype </span><br/>
            <span> description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj</span>
            <span> description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj</span>
            <span> description sjgdvhgsa sajgdjh asdgsdj sadfsajgd fjsad sajfdj sa fdja dhsj</span>
          </div>
        </div>
        
        <div class="block">
          <div style="font-size:14px;color: #500050;">
            <p class="">PQR</p>
          </div>      
          <div style="font-size: 12px;color: black;">
            <span>time </span>&nbsp;
            <span>type </span><br/>
            <span> subtype </span><br/>
            <span> description </span>
          </div>
        </div>

i am printing this divs in loop..i wrote html just to explain my problem — Vishal B, Sep 21 '17 at 09:33
it gave me result as all div came in one colomn..left column — Vishal B, Sep 21 '17 at 09:57
can you once inspect and check, because it is working fine in my answer snippet above. May be your are having empty divs in between the `block`s — Supraja Ganji, Sep 21 '17 at 10:11
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/154974/discussion-between-johnb-and-supraja-ganji). — Vishal B, Sep 21 '17 at 10:19

how to adjust div height and width according to other div when float

1 Answers1