1

.propertydetailbox2 {
 overflow:auto;
  border: 1px black solid;
 
}

.propertydetailtextbox {
    width: 30%;
 float:left;
    border: 1px solid #cccccc;
    border-radius: 8px;
 margin: 0 auto;
 margin-right:1%;
 padding:20px;
 padding-left:50px;
 height: auto;
 text-align:left;
}

.propertydetailagentbox {
 width: 30%;
 height: 100%;
 float:left;
    border: 1px solid #cccccc;
    border-radius: 8px;
 margin: 0 auto;
 margin-left:1%;
 padding:20px;
}
<div class ="propertydetailbox2">
 <div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div>
  
  <div class="propertydetailagentbox">1<br>2</div>
  
  
  
</div>

hi i have one container which contains two boxes (child boxes), i want the parent to take the height of the tallest child which is already done using overflow:auto;, then i want the second child (which is short) to be same height as the parent. i have tried various solutions given here CSS - Expand float child DIV height to parent's height but using relative and absolute stack the child divs on top of each other, and using margin-bottom: -99999px; padding-bottom: 99999px; cuts the border of the second child from the bottom, i need responsive solution.

parent div

.propertydetailbox2 {
    overflow:auto;
}

child1

.propertydetailtextbox {
    width: 30%;
    float:left;
    border: 1px solid #cccccc;
    border-radius: 8px;
    margin: 0 auto;
    margin-right:1%;
    padding:20px;
    padding-left:50px;
    height: auto;
    text-align:left;
}

child2 

.propertydetailagentbox {
    width: 30%;
    height: 100%;
    float:left;
    border: 1px solid #cccccc;
    border-radius: 8px;
    margin: 0 auto;
    margin-left:1%;
    padding:20px;
}

please see edit of jsfiddle the divs should be side by side but in jsfiddle they are coming on top of each other

Community
  • 1
  • 1
DragonFire
  • 3,722
  • 2
  • 38
  • 51
  • Please take the time to create a working example (using snippet or jsfiddle) - include both the html and css that you need in order to show the exact problem you have and explain what you are trying to get. – Dekel Mar 23 '17 at 00:17
  • @Dekel He is required to post the relevant markup that shows the problem here. Posting it only in a fiddle, or any third party site, violates SO rules. – Rob Mar 23 '17 at 00:19
  • @Rob, he can post the markup here and a complete example (if he also have external css/js files) in jsfiddle. – Dekel Mar 23 '17 at 00:19
  • @Dekel That's not what you asked him to do. – Rob Mar 23 '17 at 00:20
  • I asked him to create a working example, he can use any platform to do so. Basically he explained his markup in words, so this question will not violate any SO rules if he includes a link to a working jsfiddle example – Dekel Mar 23 '17 at 00:21
  • i am working on the jsfiddle somehow divs are coming on top of each other but in my browser they are coming on top of each other – DragonFire Mar 23 '17 at 00:22
  • @Dekel please see jsfiddle, but problem in jsfiddle is that child divs are coming top of each other but in my browser they are side by side – DragonFire Mar 23 '17 at 00:24
  • @Dekel see now apparently 30% width is working to show my problem in jsfiddle... – DragonFire Mar 23 '17 at 00:32

1 Answers1

5

you can use display instead float:

  • flex

.propertydetailbox2 {
  display: flex;
  border: 1px black solid;
}

.propertydetailtextbox {
  flex: 1;
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin: 0 auto;
  margin-right: 1%;
  padding: 20px;
  padding-left: 50px;
  height: auto;
  text-align: left;
}

.propertydetailagentbox {
  flex: 1;
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin: 0 auto;
  margin-left: 1%;
  padding: 20px;
}
<div class="propertydetailbox2">
  <div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div>
  <div class="propertydetailagentbox">1<br>2</div>
</div>
  • table

.propertydetailbox2 {
  display: table;
  table-layout:fixed;
  border-spacing:1vw;/* or 1vw 0 or whatever you need */
  width:100%;
  border: 1px black solid;
}

.propertydetailtextbox {
  display:table-cell;
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin: 0 auto;
  margin-right: 1%;
  padding: 20px;
  padding-left: 50px;
  height: auto;
  text-align: left;
}

.propertydetailagentbox {
  display:table-cell;
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin: 0 auto;
  margin-left: 1%;
  padding: 20px;
}
<div class="propertydetailbox2">
  <div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div>
  <div class="propertydetailagentbox">1<br>2</div>
</div>
  • grid

.propertydetailbox2 {
  display: grid;
  grid-template-columns: 50% 50%;
  border: 1px black solid;
}

.propertydetailtextbox {
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin-right: 1%;
  padding: 20px;
  padding-left: 50px;
  height: auto;
  text-align: left;
}

.propertydetailagentbox {
  border: 1px solid #cccccc;
  border-radius: 8px;
  margin-left: 1%;
  padding: 20px;
}
<div class="propertydetailbox2">
  <div class="propertydetailtextbox">1<br>2<br>3<br>4<br> </div>
  <div class="propertydetailagentbox">1<br>2</div>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129