CODEWITHSUNDEEP
htmlcss
River CR Phoenix
River CR Phoenix

Reputation: 311

The margin top 50% making element out of screen

if i give margin top 50% to the element, it takes it out of screen. its suppose to be in center. but its out of screen. the margin top 100% should take it to bottom, not half of it, 50%. any thing i did wrong??

HTML

     <div class="container">
    <div class="buttons">

            <a class="website" href="#">23Designs</a>


            <a class="blog" href="http://www.nuori.in">Nuori</a>

    </div>
    <p>Copyright 2015 23Desings</p>     
</div>

CSS

.container{
width: 100%;
margin: 0 auto;
height: 100%; 
position: relative;
overflow: hidden;
}
.buttons{
width:  300px;
height: 50px;
margin-left:auto;
margin-right:auto;
position: relative;
margin-top: 45%;
}
.blog{
width: 100px;
border-radius: 2px;
box-shadow: 0px 0px 2px #ccc;
text-align: center;
padding: 10px 20px;
background-color: #F9690E;
color: #fff;
font-size: 14px;
position: absolute;
left: 0px;
}
.blog:hover{
color: #f9f9f9;
box-shadow: 2px 2px 2px #b9b9b9;
}
.website{
width: 100px;
border-radius: 2px;
box-shadow: 0px 0px 2px #ccc;
text-align: center;
padding: 10px 20px;
background-color: #22A7F0;
color: #fff;
font-size: 14px;
position: absolute;
right: 0px;
}
.website:hover{
color: #f9f9f9;
box-shadow: 2px 2px 3px #b9b9b9;
}
p{ 
height: 50px;
color: #CCC;
text-align: center;
bottom: 10px;
position: absolute;
left: 0;
right: 0;

}

Upvotes: 1

Views: 3775

Answers (1)

Shrinivas Pai
Shrinivas Pai

Reputation: 7711

You can use viewport value instead of ems, pxs or pts.

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

Try margin-top:50vh it will take 50% height of the viewport. 

.buttons{
width:  300px;
height: 50px;
margin-left:auto;
margin-right:auto;
position: relative;
margin-top: 50vh; //changed this
}

Demo here

Upvotes: 5

Related Questions