1

The image, my case

Hello I have 3 divs, A, B and C. A and B are inside the C. Please take a look at the image.

I have tryed everything but still can't make the height of A being equal the height of B. B is dynamic, it depends on the fit of the text to the window's width. So it doesn't work because the height of DIV C is not defined, it is auto, therefore height: 100% of DIV A doesn't work.

My code is:

<div style="display:block; width:100%; height:auto; margin:25px;">  

 <div style="height:100%; width:50px; display:block; float:left; background-color:rgb(12,12,12); margin-right:10px;">
    <p2>1</p2>
 </div>  

 <div style="width: calc(100% - 60px); display:block; float:left; background-color:rgb(12,12,12); padding:15px;">
    <p2>A client orders building construction for his or her business or family, it can be as an 1 floor building as well as an 100 floor building or even a district.</p2>
 </div>

Of course there is the 3rd /div at the end but I can't put it here for some reason. I don't know why. Thank you in advance guys.

iamalexey
  • 11
  • 1
  • why are you using `float left`? – s.kuznetsov Nov 02 '20 at 04:50
  • Hello Sergey, well, first of all, sometimes when something doesn't work I try everything. But in this case the logic was that the DIV B is sticking to DIV A and DIV A is sticking to the left side. – iamalexey Nov 02 '20 at 05:11
  • in your case, I do not recommend using float. the float rule is used only in an emergency. Today, there are many ways to easily get the desired result. For example, there are flexbox and grid. Show me the layout you need to make, I will help you. – s.kuznetsov Nov 02 '20 at 05:31
  • 1
    Thank you very mcuh Sergey! That is exactly what I needed, you are absolutely right. Unfortunately I didn't know about flexbox and flex displaying. Thank you very much for the help! – iamalexey Nov 02 '20 at 21:16
  • I was glad to give advice )) – s.kuznetsov Nov 03 '20 at 02:18

2 Answers2

1

as @sergey kuznetsov said try to use flex or grid.

    <div style="display: flex; margin: 25px;">
  <div
    style="
      width: 50px;
      background-color: rgb(12, 12, 12);
      margin-right: 10px;
    "
  >
    <p2>1</p2>
  </div>

  <div
    style="
      width: calc(100% - 60px);
      background-color: rgb(12, 12, 12);
      padding: 15px;
    "
  >
    <p2
      >A client orders building construction for his or her business or
      family, it can be as an 1 floor building as well as an 100 floor
      building or even a district.</p2
    >
  </div>
</div>
Jerry
  • 188
  • 5
  • Thank you very much Jerry! I didn't know about flex displaying. You all guys are my saviors :) I wish you all the best! – iamalexey Nov 02 '20 at 21:13
1

Please have a look at flexbox layout. You can play with content and remove min-width and height as well. In any case height of both inner divs will be same matching the bigger one.

.C{
  display:flex;
  flex-direction: row;
  border:2px solid black;
}

.A, .B {
  padding:16px;
  min-height:20px; //optional and can be removed as per requirement.
  min-width:20pc; //optional and can be removed as per requirement.
}

.A{
  background-color: lightblue;
}

.B{
  background-color: lightgreen;
}
<div class="C">
  <div class="A">placeholder</div>
  <div class="B">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid quis amet fugit, optio incidunt atque corporis ipsum quae quam suscipit unde nostrum, fuga, dolorum commodi nam enim quibusdam. Voluptatum, autem?</div>
</div>

The working

.C{
  display:flex;
  flex-direction: row;
  border:2px solid black;
}

.A, .B, .D {
  padding: 16px;
}

.A, .D{
  background-color: lightblue;
  width: 20%;
}

.B{
  background-color: lightgreen;
}
<div class="C">  

 <div class="A">
    <p2>1</p2>
 </div>  

 <div class="B">
    <p2>A client orders building construction for his or her business or family, it can be as an 1 floor building as well as an 100 floor building or even a district.</p2>
 </div>
  
  <div class="D">
    <p2>3rd div</p2>
 </div>
  
</div>

solution for your example.

Dhruvi Makvana
  • 895
  • 5
  • 17