CODEWITHSUNDEEP
css
craftdeer
craftdeer

Reputation: 1037

How to position text 5% from the right edge of the screen?

My HTML is like this 

 <div class="maindiv">
   <h1>Hello World</h1>
   <h1>Click Here</h1>
 </div>

I am trying to position Hello World in the center and the text Click Here 5% from the right edge of the screen.

Here is my CSS 

    .maindiv {
    position: relative;
     }

   .maindiv h1:nth-child(1) {
    text-align: center;
    }

   .maindiv h1:nth-child(2) {
    right: 5%;
    }

I dont know why it is not working. I have set Parent's div to relative and set second child to right's 5% so it should be 5% off from the right but its still on the left

Upvotes: 1

Views: 3370

Answers (5)

Hugo G
Hugo G

Reputation: 16526

Your rule on .maindiv only defines how that div behaves to its parent element. It has no effect on the div's children.

Your rule on the second h1 has no effect since right is ignored for static positioning and would move the element more to the left if you used it with relative positioning. You want it to not be bigger than 100% of the horizontal space, but still be affected by the parent's bounds. This is where position: absolute comes in. In order to make it relative to the parent, the parent needs its relative without any other settings, though (or anything non-static for that matter).

If you want them on the same height, I suggest float or top: 0 with position: absolute.

What you might want instead:

.maindiv {
  /* only as a reference for children positioning */
  position: relative;
}

.maindiv > h1 {
  /* You don't want margins to affect positioning here */
  margin: 0;
}

.maindiv h1:nth-child(1) {
  text-align: center;
}

.maindiv h1:nth-child(2) {
  position: absolute;
  right: 5%;
  top: 0;
}
<div class="maindiv">
  <h1>Foo</h1>
  <h1>Bar</h1>
</div>

Upvotes: 4

Alauddin Ahmed
Alauddin Ahmed

Reputation: 1185

Style your css like this:

.maindiv {
    position: relative
}
.maindiv h1:nth-child(1) {
    position: absolute;
    left: 50%;
    top: 50%;
}
.maindiv h1:nth-child(2) {
    position: absolute;
    bottom: 0;
    right: 5%;
}
<div class="maindiv">
<h1>Centered</h1>
<h1>right-aligned</h1>
</div>

Upvotes: 1

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

It is not good to use multiple <h1> tags in one html page. So I changed the click here to <a> since it seems like a link by text. In the below code, click here is placed relative to <h1>, so if you are moving html down words, click here will also move with it. Just try this.

.maindiv h1 {
  text-align: center;
  position: relative;
  line-height: 20px;
}

.maindiv h1 a {
  position: absolute;
  right: 5%;
  font-size: 16px;
}
<div class="maindiv">
   <h1>Hello World
    <a href="#">Click Here</a>
   </h1>
 </div>

Upvotes: 1

Reggie Peterson
Reggie Peterson

Reputation: 36

When positioning elements with right, left, top, and bottom, imagine the element being pushed in the direction you specify. i.e. right:5%; would push the element 5% to the right.

In this case, all you need to do is initially align .maindiv to text-align:right. like so: 

.maindiv {
  position: relative;
  width: 100%;
  text-align: right;
}

.maindiv h1:nth-child(1) {
  text-align: center;
}

.maindiv h1:nth-child(2) {
  position: relative;
  right: 5%;
}
<div class="maindiv">
<h1>centered</h1>
<h1>right aligned</h1>
</div>

Your code will now work.

Upvotes: 1

lakshman rajput
lakshman rajput

Reputation: 507

Use margin-right rather then only right property.

.maindiv h1:nth-child(2) { margin-right: 5%; }

Upvotes: 3

Related Questions