CODEWITHSUNDEEP
htmlcss
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85643

How does this produce unequal height divs?

demo [Firefox & IE]

HTML:

<div class="content">
  <div class="img">
    <div class="divs">
      <img src="path.jpg" alt="" />
    </div>
    <div class="divs">
      <img src="path.jpg" alt="" />
    </div>
    <div class="divs">
      <img src="path.jpg" alt="" />
    </div>
    <div class="divs">
      <img src="path.jpg" alt="" />
    </div>
  </div>    
</div>

CSS:

html, body {
    height: 100%;
}

.content {
    /* height: 100%; */
    position: relative;
    width: 100%;
}

.img {
    height: 100%;
    margin-left: 0.5%;
    max-width: 100%;
    width: 100%;
}
.content .divs {
    border: 1px solid #b64024;
    float: left;
    height: 25.5%;
    margin: 1% 0.5% 0;
    overflow: hidden;
    width: 20%;
}
.content .divs img {
    height: 100%;
    width: 100%;
}

If you uncomment the height: 100%; from .content then you'll see the equal height divs there with images.

So, my question is:

How the .divss' height is calculated without having parent div height .img -> .content in percentage calculation for inherited div ?

Upvotes: 2

Views: 112

Answers (2)

Phrogz
Phrogz

Reputation: 303490

Here's your problem in a nutshell:

Demo: http://jsfiddle.net/a75ekc0e/9/

.content {
    height:400px;
    position:relative;
}

.content div {
    float:left;
    background:yellow; border:1px solid blue;
    width:20%; height:25%;
    margin:1em;
}

That simplified demo shows the content 'working'. The key parts are that:

  • Your divs have a percentage height.
  • The 'containing block' of the divs has an explicit height.
    • Super-important: Note that the position:relative causes .content to be the 'containing' for its children; without this declaration it will be the body that is used for positioning.
  • …and thus, the divs can calculate their height based on their positioning.

If you remove the height from the .content then this element has no explicit height, and its height is taken from its content. When you do that with the above demo and Run it, you see the divs collapse to have no height at all, because they cannot calculate the percentage of something that will be determined later on.

In your demo they get their height from their varying-height image content, which causes them to vary. The height:25.5% is completely ignored because the parent has no explicit height.

Per the specification of the CSS height property:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

For more details, read the section "Calculating Heights and Margins" in the CSS specification.

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85643

This might not be an answer.

Though, struggling a lot, I found the key reason behind this in short is due to different height of images in original size.

Let see the demo with equal height original image size: demo

But still amazed of behavior of height of images just due to original image sizes and it also varies in different browsers.

Upvotes: 0

Related Questions