How to place div in top right hand corner of page

HtmlCss

Html 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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser1914374View Question on Stackoverflow
Solution 1 - HtmlShah RukhView Answer on Stackoverflow
Solution 2 - HtmldunliView Answer on Stackoverflow
Solution 3 - HtmlHaryView Answer on Stackoverflow
Solution 4 - Htmluser1862184View Answer on Stackoverflow