css height of div not inheriting from container

Question

Here is a container div with two floated 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>

Both the floated divs have gray borders on the left, which separate the columns.

Everything is rendering properly except the gray borders. DivII is shorter than DivI. The container div red border is matching the bottom of the border of div I, but the border for divII is not inheriting the height of the container and is too short.

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

nem035 · Answer 1 · 2017-06-16T03:04:48.377

The problem is that you're specifying min-height on the parent but expecting the child to inherit height. You should either use height on the parent or min-height: inherit on the child.

It must also be said that you really don't want to use inline styling, primarily due to its high specificity (only inline !important beats it) and necessary repetition across DOM elements.

Use min-height: inherit on the 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>

Use height on the 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>

I tried exactly what you suggest, min-height:inherit and it made no difference. The DivII is still short. Putting a specific height in the container div results in the child div being cut off. Re the inline styling, I use that while I am fiddling around trying to get what I want, and then move it to the CSS page when I know what it will be. — Betty Mock, Jun 16 '17 at 17:59
@BettyMock Are you sure you didn't change anything else? I attached a live example here that demonstrates it working. Click on one of the snippets to run them. — nem035, Jun 16 '17 at 18:09

score 0 · Answer 2 · answered Jun 16 '17 at 03:09

 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>

css height of div not inheriting from container

2 Answers2