I want to link button and put it to the right

Question

I need to do school work. I need to link the button and put it to the right side of my page but every time i put the link or button to the right it does not work.

What html code should I put and in what order to have button on the right and link to it. On the photo is what I have right now.

Welcome to SO. Please visit the [help] to see what and how to ask. HINT: Post effort and CODE. This will be voted down and closed as off topic. Also never wrap a button in a link, nor wrap a p in a p. And lastly: Learn how to crop an image. I fixed that part for you — mplungjan, Apr 17 '17 at 11:50
I use notepad++ i need basically button on the right with link that is it, help will be very much appreciated — Katharina Kliber, Apr 17 '17 at 11:52
So 1: Post the HTML of what you have 2: Try to find a resource that shows you valid markup. A button inside a link inside a p inside a p is very invalid. Post HTML and indent it 4 spaces — mplungjan, Apr 17 '17 at 11:54
this is what i have i just need this button to be on the right — Katharina Kliber, Apr 17 '17 at 11:59
Possible duplicate of [Place a button right aligned](http://stackoverflow.com/questions/6632340/place-a-button-right-aligned) — Cullub, Apr 17 '17 at 14:56

gavgrif · Answer 1 · 2017-04-17T12:35:39.477

This is a simple thing - as noted above - you need to float it to the right.... BUT if you are floating something - this will have consequences on the next elements - so you will also need to clear the float.

Another thing to think of - is that a p element is a block level element - so will take up the entire row - whereas an a element is an inline level element - meaning it won't. This is why doing it this way causes the button to be on the previous line up from the p - which is on the next row. You can alter that - but it needs to be planned out a bit.

Just so you understand the structure of the HTML - this may also allow you to have a different structure to the code. Also - I only put in the text that showed up in the image so it is not a full row.

Also note that I have applied the CSS to the element in the CSS portion as opposed to inline styling - this is better code structure as it keeps the HTML and CSS separate. I also whacked in some styling (from https://www.thoughtco.com/styling-links-with-css-3466838) to give link a button like look.

.button{
  float:right;
  border-style: solid;
  border-width : 1px 4px 4px 1px;
  text-decoration : none;
  padding : 4px;
  color:black;
  border-color : #69f #00f #00f #69f;
 }

.button:hover {
  border-color: black;
  color:  #00f ;
}

p{
  clear:both
}

<a class="button" href="2.html">Next</a>
<p>The most important reason of why you should remain heal</p>

htmandvbscript · Answer 2 · 2017-04-17T17:47:24.127

If you put this html code element in:

<button><a href="http://stackoverflow.com/questions/43450852/i-want-to-link-button-and-put-it-to-the-right/43451382#">this page</a>

You will get this:

<button><a href="http://stackoverflow.com/questions/43450852/i-want-to-link-button-and-put-it-to-the-right/43451382#">this page</a>
</button>

And this to your CSS:

button {
float: right;
}

You will get at end this:

<style>button {
    float: right;
    }
    </style>
<button><a href="http://stackoverflow.com/questions/43450852/i-want-to-link-button-and-put-it-to-the-right/43451382#">this page</a>
    </button>

Alessio Rossotti · Answer 3 · 2017-04-17T12:06:27.917

-1

You have to add a little bit of CSS. <button style="float:right;">

edited Apr 17 '17 at 12:06

answered Apr 17 '17 at 11:48

Alessio Rossotti

314
2
22

can you please write from the beggining to the end how this whole line should look PLEASE – Katharina Kliber Apr 17 '17 at 11:49
Post your code in a readable format with your efforts ( Ctrl + K or Cmd + K in a mac). You should rewrite your html because it's invalid, look here http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link. – Alessio Rossotti Apr 17 '17 at 11:58
this is code that i used i just need the button in the right – Katharina Kliber Apr 17 '17 at 12:02

I want to link button and put it to the right

3 Answers3