How to place div in top right hand corner of page
HtmlCssHtml Problem Overview
How do you float a div to the top right hand corner of a page using css? I want to float the topcorner
div which is below:
<p><a href="login.php">Log in</a></p>
<div class="topcorner"><a href="home.php">Back to Home</a></div>
log in goes in left hand corner which it does at moment, I want home link to be placed in other corner,
Html Solutions
Solution 1 - Html
the style is:
<style type="text/css">
.topcorner{
position:absolute;
top:0;
right:0;
}
</style>
hope it will work. Thanks
Solution 2 - Html
Try css:
.topcorner{
position:absolute;
top:10px;
right: 10px;
}
you can play with the top
and right
properties.
If you want to float the div
even when you scroll down, just change position:absolute;
to position:fixed;
.
Hope it helps.
Solution 3 - Html
You can use css float
<div style='float: left;'><a href="login.php">Log in</a></div>
<div style='float: right;'><a href="home.php">Back to Home</a></div>
Have a look at this CSS Positioning
Solution 4 - Html
<style type="text/css">
.topcorner{
position:absolute;
top:10;
right:15;
}
</style>
You ca also use this in CSS external file.