Question

I am using 5 banner images with hover effects and using below code

#banner
{
    float:left;
    width:99.025%;
    padding:0 0 0 10px;
    margin:0;
    height: 16.714em; /* 234px*/
    position:relative;
    overflow:hidden;
    display:block;
    background:url('/pages/images/bottom_wood_repeater.jpg') 0 104px repeat-x;
}

#banner img
{
    float:left;
    width:19.435%; /*197px;*/
}

#banner a img
{
    float:left;
    display:block;
}

#banner a:hover img
{
    float:left;
    position:relative;
    top:-16.714em; /* 234px*/
}   

Can i use height in percentage instead of em?

height: 16.714em; /* 234px*/

Actually i am creating responsive design and it is creating problem for smaller resolution or for mobile.

Current site : http://new.brandonplanning.com/home

Thanks in Advance 🙂

Answer 1

Yes and no.

Specifically, you can not do that if the parent element does not have a fixed height. Think about it: if an element could have a height equal to a percentage of its parent’s height, then the parent’s height would need to be calculated first. But to calculate the parent’s height, you need first to calculate the height of its children. But before you calculate the height of this child, you need to calculate the parent’s height. You see where this is going.

If the parent does have a fixed height then percentage heights on children are fine.

If the parent does not have a fixed height and you set a percentage height to a child the browser will simply give up and treat the child as having height: auto.