Skip to content
Fix Code Error

Place a button right aligned

March 13, 2021 by Code Error
Posted By: Anonymous

I use this code to right align a button.

<p align="right">
  <input type="button" value="Click Me" />
</p>

But <p> tags wastes some space, so looking to do the same with <span> or <div>.

Solution

Which alignment technique you use depends on your circumstances but the basic one is float: right;:

<input type="button" value="Click Me" style="float: right;">

You’ll probably want to clear your floats though but that can be done with overflow:hidden on the parent container or an explicit <div style="clear: both;"></div> at the bottom of the container.

For example: http://jsfiddle.net/ambiguous/8UvVg/

Floated elements are removed from the normal document flow so they can overflow their parent’s boundary and mess up the parent’s height, the clear:both CSS takes care of that (as does overflow:hidden). Play around with the JSFiddle example I added to see how floating and clearing behave (you’ll want to drop the overflow:hidden first though).

Answered By: Anonymous

Related Articles

  • Why doesn't the height of a container element increase if it…
  • What does the CSS rule "clear: both" do?
  • Is it possible to apply CSS to half of a character?
  • insert tables in dataframe with years from 2000 to 20018…
  • Pandas pivot_table: filter on aggregate function
  • Is CSS Turing complete?
  • SQL find sum of entries by date including previous date
  • In CSS Flexbox, why are there no "justify-items" and…
  • Fix top buttons on scroll of list below
  • Adobe XD to responsive html

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Convert a Unicode string to a string in Python (containing extra symbols)

Next Post:

How to POST JSON data with Python Requests?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error