Get parent empty space

Gonchar Denys Published at Dev

Gonchar Denys

I have many elements with header of image with static height and some text below. Target is to get that .outer full height as the elements in the row with it. I need that text to get width of image and height to be full as it can be. This is what i have achieved at the moment.
CSS:

.outer {
     display: inline-block;
}
.inner {
    background: green;
    display: table-caption;
}
.inner>img{
  height: 200px;
}

HTML:

<div class="outer">
    <div class="inner">
        <img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg"/>
        <p>Useless Text.</p>
    </div>
</div>

Rachel Gallen

Here the essential thing is vertical-align:top; I have given a fixed width but you can give width in percentage.

body {
  width: 100%;
}
.outer {
  display: inline-block;
  width: 90%;
}
.inner {
  display: inline-block;
  vertical-align: top;
  background: green;
  width: 290px!important;
  padding-right: 20px;
  padding-left: 15px;
}
.inner>img {
  height: 200px;
}
.inner>p {
  width: inherit;
}
.inner>img,
.inner>p {
  display: block;
}

<body>
  <div class="outer">
    <div class="inner">
      <img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg" />
      <p>Useless Text. CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never
        knew about. In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file
        some of these away for later use.</p>
    </div>


    <div class="inner">
      <img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg" />
      <p>This is an awesome text, but i want my element get height of left space up of my image.</p>
    </div>


    <div class="inner">
      <img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg" />
      <p>Useless Text. CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never
        knew about. In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file
        some of these away for later use.</p>
    </div>

  </div>

</body>

Collected from the Internet

Please contact [email protected] to delete if infringement.