CODEWITHSUNDEEP
htmlcss
user1914374
user1914374

Reputation: 1260

How to place div in top right hand corner of page

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 the left hand corner which it does at moment, but I want "Back to Home" to be placed in the other corner.

Upvotes: 79

Views: 271423

Answers (4)

user1862184
user1862184

Reputation: 35

<style type="text/css">
 .topcorner{
  position:absolute;
  top:10;
  right:15;
  }
</style>

You ca also use this in CSS external file.

Upvotes: 1

Shah Rukh
Shah Rukh

Reputation: 3156

the style is:

<style type="text/css">
 .topcorner{
   position:absolute;
   top:0;
   right:0;
  }
</style>

hope it will work. Thanks

Upvotes: 156

Hary
Hary

Reputation: 5818

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

Upvotes: 6

dunli
dunli

Reputation: 1376

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.

Upvotes: 30

Related Questions