Search code examples
htmlcssslideshow

button heights not matching


I am making a website for my college course and I am having problems getting the button heights in my slide show to match up. I was wondering if anyone could give me a clue as to how to get them both to be at the same height?

This is my css for the slide show:

/=== SLIDESHOW SECTION ===/

#container
{
    width: 90%;
    height: 700px;
    border: none;
    margin: 0 auto;
    position: relative;

}

#container > img
{
    width: 100%;
    height: 100%;
    position: absolute;
}

#container > .btn
{
    position: absolute;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 25px;
    top: 350px;
    background: #000000;
    color: #ffffff;
    font-size: 20px;
}

#container>#btn1:hover
{
    box-shadow: 10px 0px 20px 0px #343d46 ;
}
#container>#btn2:hover
{
    box-shadow: -10px 0px 20px 0px #343d46;
}

#container>#btn2
{
    position: relative;
    float: right;    
}

picture of the problem


Solution

  • change your
    
    #container>#btn2
    {
        position: relative;
        float: right;    
    }  
    to  
    #container>#btn2
    {
        right:0;    
    }