CODEWITHSUNDEEP
css
John L.
John L.

Reputation: 1953

Div Gets 0 Height Instead Of The % Of Its Parent

In the code below, div with red background gets 0 height when the image is there but with image node removed, it gets the correct height of 60px from the parent. Why is it and how can it be corrected?

Here is also the jsfiddle link: https://jsfiddle.net/zuymamq7/

html,body{
  width:100%;
  height:100%;
}
    <table style="width:100%;height:100%;">
      <tr style="height:60px;">
        <td>
          <div style="width:100%; height:100%; background-color:blue;">
          <img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;"></img>
          <div style="display:inline-block;width: 10%; height:100%; background-color:red;">
          </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
       </td>
     </tr>
   </table>

Upvotes: 0

Views: 35

Answers (1)

Jhecht
Jhecht

Reputation: 4435

Biggest thing that I noticed as I began to edit this:

You added a close image tag (</img>). Those don't exist. The correct syntax is either <img src="something.jpg"> or more technically <img src="something.jpg" /> Threw off some things a lot (especially in the editor)

I'm thinking this is what you want, or at least, I hope.

html,
body {
  width: 100%;
  height: 100%;
}
<table style="width:100%;height:100%;">
  <tr>
    <td style="height:60px">
      <div style="width:100%; height:100%; background-color:blue;">
        <img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
        <div style="display:inline-block;width: 10%; height:100%; background-color:red;">
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
</table>

Other Way

If you can change up the HTML a bit, then this should work too.

html,
body {
  height: 100%;
  width: 100%;
}
table {
  border-collapse: collapse;
}
<table style="width:100%;height:100%;">
  <tr style="background-color:blue">
    <td style="height:60px;width:60px;">

      <img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
    </td>
    <td style="background-color:red; width:10%">
      
        Text
      

    </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions