Css Div 100% Height Issue

So I have a html structure like this Why the #bottomBar height stretches all the way for more than few hundred pixels while the bg image is just around 115px? UPDATE: I actually d

Solution 1:

Just set the div height explicitly, like height:115px, or write a server-side script to return the height of the image, if it is worth doing so. As mentioned by others, setting height (or width) to X% means X% of the container, and not of the background-image.

Solution 2:

height: 100% means that the element will take 100% of the height of its container. So in this case, 100% of the height of the #container element.

It's not related to the background image.

Set height: 115px to make #bottomBar the same height as its background image:

#bottomBar  { height: 115px; margin:0 auto; width:100%; padding:0px; background: #ffffffurl('../images/bottomBG.jpg') 00 repeat-x; }

Solution 3:

Have tried changing the style to height: auto ?

#bottomBar  { height: auto; margin:0 auto; width:100%; padding:0px; background: #ffffffurl('../images/bottomBG.jpg') 00 repeat-x; }