CODEWITHSUNDEEP
htmlcss
Betty Mock
Betty Mock

Reputation: 1403

css height of div not inheriting from container

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.

Upvotes: 3

Views: 1826

Answers (2)

Hasan alattar
Hasan alattar

Reputation: 339

 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>

Upvotes: 0

nem035
nem035

Reputation: 35501

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.

  1. 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>

  1. 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>

Upvotes: 4

Related Questions