Clever Geek Handbook

Css div height not inheriting from container

Here is a container div with two floats and one regular div inside:

<div style="width: 110%; min-height:250px;overflow:hidden; border: 4px solid red">

  <!-- divI -->
  <div style="float:right; padding:25px; width:35%; border: 6px  gray; border-style: hidden hidden hidden double ">
    ....stuff
  </div>

  <!-- divII -->
  <div style="float:right; padding: 25px; width:35%;  border-left: 6px gray; border-style: hidden hidden hidden double; height:100% ">
    ....stuff
  </div>

  <div>
    .... stuff
  </div>
</div>
Run code


Both floating divs have gray borders on the left that separate the columns.

Everything is done correctly, except for the gray borders. DivII is shorter than DivI. The red border of the container div matches the bottom border of div I, but the border for divII does not inherit the height of the container and is too short.

I understand that floating divs can cause problems of this kind, but I don't know how to fix it.

+3


source to share


2 answers


The problem is that you are specifying min-height

for the parent, but expecting the child to inherit height

. You must either use height

for parent or min-height: inherit

child.

It should also be said that you really don't want to use inline styling , mainly because of its high specificity (only inline style!important

beats it) and the necessary repetition through DOM elements.

  • Use min-height: inherit

    for child:



.parent {
  width: 110%;
  min-height: 250px;
  overflow: hidden;
  border: 4px solid red;
}

.child {
  float: right;
  padding: 25px;
  width: 35%;
  border-left: 6px gray;
  border-style: hidden hidden hidden double;
  min-height: inherit; /* <-- use min-height here */
  height: 100%;
}
      

        
        
        
      

    
<div class="parent">

  <div class="child">....stuff</div>

  <div class="child">....stuff</div>

  <div>.... stuff</div>
</div>
Run code


  1. Use height

    for parent:



.parent {
  width: 110%;
  min-height: 250px;
  height: 250px; /* <-- use height here */
  overflow: hidden;
  border: 4px solid red;
}

.child {
  float: right;
  padding: 25px;
  width: 35%;
  border-left: 6px gray;
  border-style: hidden hidden hidden double;
  height: 100%;
}
      

        
        
        
      

    
<div class="parent">

  <div class="child">....stuff</div>

  <div class="child">....stuff</div>

  <div>.... stuff</div>
</div>
Run code


+4


source 


 height:100%

u forgot in ur second div



    <div style="width: 110%; min-height:250px;overflow:hidden; border: 4px solid red">

  <!-- divI -->
  <div style="float:right; padding:25px; width:35%; border-left: 6px  gray; border-style: hidden hidden hidden double; height:100%  ">
    ....stuff 1
  </div>

  <!-- divII -->
  <div style="float:right; padding: 25px; width:35%;  border-left: 6px gray; border-style: hidden hidden hidden double; height:100% ">
    ....stuff 2
  </div>

  <div>
    .... stuff
  </div>
</div>
0


source






More articles:


All Articles