CODEWITHSUNDEEP
htmlcssinheritanceheight
user5520170
user5520170

Reputation:

parent inherit from child

I have a div.cf that contains an img and a div.p.

I want to make the div.cf the height of the img (respecting margins and padding), want to set the div.p in the left middle of the div.cf.

When I put 

div.p {height: 100%; vertical-align: middle;}

it assumes the whole page, opening the div.cf, when I wanted only to make the 100% of the div.cf.

I know why it happens, the height of the div.cf is auto, what I wanted to know is if can make the height of the div.cf depending of img.

this is how it is http://fiddle.jshell.net/freakhealer/1tjcooq9/

i did not put the height:100% nor the vertical-align:middle cause its not afecting in the fiddle.

its currently like this enter image description here

an i try the height: 100% enter image description here

and finaly this is what i want (its paint work) enter image description here

Upvotes: 1

Views: 953

Answers (2)

AmitV
AmitV

Reputation: 260

May this will help you. you do resize your window and you will find that "div.cf" is taking its inner ".cf img" height. go to this link and check. http://jsfiddle.net/amitv1093/Ld7n56rq/

    div.cf
{
  background:red;
  padding:5px;
  position:relative;

}

.cf img
{
  width:100%;
}
.cf p
{
  position:absolute; 
  color:#fff;
  z-index:99;
  font-size:100%;
  top:50%;
  margin:-9px 0px;

}

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46785

You could try using CSS tables as shown below.

CSS tables are backward compatible with older browsers.

On the parent block, set display: table and width: 100%, and then set display: table-cell on the child p elements.

You can get better control of the layout if you wrap the image in a p tag.

.wrapper {
  border: 1px dotted blue;
  width: 100%;
  display: table;
}
.wrapper p {
  display: table-cell;
  vertical-align: middle;
  border: 1px dashed blue;
  width: 100%; /* forces table-cell to have a shrink-to-fit with on the image */
}
.wrapper img {
  display: block; /* Removes whitespace below baseline of an inline image */
}
<div class="wrapper">
  <p>Some text to the left of the image.</p>
  <p><img src="http://placehold.it/200x200"></p>
</div>

Upvotes: 0

Related Questions