1

Here is the prototype I am trying to implement enter image description here Here is what I have right now. enter image description here

I learned from my previous question Side to Side How to align the column of options with the picture - using display inline block attribute- Display.

Now I am trying to align the picture so the picture doesn't stretch past the entertainment option like in the prototype. Here is JSFiddle

Seeing that a block element like div "occupies the entire space of its parent element" - Block Element, the Css Height attribute made the most sense to me to use here.

Here is my code for setting height in both the image and the div containing the image

The div

 .sidebar {
    display:inline-block;
    vertical-align:top;
    width:70%;
        height:3%;
    }

The image 

#laptop {
width:100%;
height:3%;
vertical-align: bottom;
}

The 3% was just a hardcoded test value but in both instances, the height of the image didn't change. I saw another thread on this - Height Thread but that one said to adjust height as well.

Does anyone know to scale the height of the image in this situation?

Community
  • 1
  • 1
committedandroider
  • 8,711
  • 14
  • 71
  • 126

2 Answers2

0

How I solved this issue was I realized that by definition, a div is a block element that "will expand naturally to fit its child elements".

So going off that, I played around with the css width and height attributes and found a height that would cause the image to line up with the entertainment component.

If anyones curious, here is my final img html tag code(height of 240 pixels)

<img id="picture" align="middle" src="zoom-39988392-3.JPG" height = "240" width ="90" />
committedandroider
  • 8,711
  • 14
  • 71
  • 126
-1

Taking a shot in the dark without looking at all the code. How are you creating your image, in an <img src=""/> tag or as the background of a div via the css attribute background:url("image.png");? The height and width percentages reference the dimensions of that elements parent element. I'm going to assume that your image has no parent element/container, or that the parent/element container is not set to specified height. Therefore your element is referencing the Viewport who's height attribute is automatically set to auto. Set your HTML and Body elements height attribute to 100%.

html,body{
   height:100%;
}
David Calvin
  • 194
  • 1
  • 11
  • image tag. The image parent is a div containing it. I tried to set the parent/element container to a specific height. Setting height to 100% made the picture disappeare. Shouldn't html and body be 100%(whole of the page) by default? – committedandroider May 07 '15 at 17:08
  • The html and body elements do not have a defined height, and are by default set to 'auto'. This is an undefined value. The percentage attribute needs to reference a defined height/width value. By setting the html and body elements to a defined height the children elements have something to reference. I hope I am explaining this properly, please feel free to correct me. [link](http://www.tutorialrepublic.com/faq/how-to-set-a-div-height-to-100-percent-using-css.php) – David Calvin May 07 '15 at 17:22
  • Bottom line, if you want to set the height of the image using a percentage the parent element which it is contained within needs to have a defined height. – David Calvin May 07 '15 at 17:27
  • Ahh i see thanks for explaining that. Do you know when I explicitly set height and width of html and body, the image just totally disappears? – committedandroider May 07 '15 at 17:40
  • Sorry just saw the link to the fiddle. – David Calvin May 07 '15 at 18:48
  • Yeah I tried changing the height on the image to control how much of the block it should take up but there is no effect. – committedandroider May 07 '15 at 19:49