Right-align form elements with CSS

If you’re anywhere near as old as I am, you would think “table” when you needed to align things on a web page. Especially if things are to be right-aligned. At the same time you know that these days, layout activities should be carried out through CSS, and tables have turned into sorts of evil. At least, the “align” attribute of td elements and alike is officially obsolete now – “Use CSS instead” it states, bluntly.

So… fiddle time! Look here: https://jsfiddle.net/wscherphof/9sfcw4ht/10/

Schermafbeelding 2015-06-17 om 10.27.17

The Table version looks quite allright, but is full of the obsoleted align=”right” that we’re aiming to avoid. The Plain HTML version is the naked skeleton that, while functionally intact, could use some CSS magic in browsers that support it. The CSS Justify version uses “justify-content: space-between;”, while the CSS Float version uses “float: right;”. Both CSS versions look very similar, but that’s changing a bit when we start narrowing down the viewport:

Schermafbeelding 2015-06-17 om 10.36.10

The Justify version is behaving more like the Table version there, while the Float version acts more like the Plain HTML. Let’s see what happens if we squeeze it a bit more:

Schermafbeelding 2015-06-17 om 10.40.20

Oops. The Table version is definitely in trouble here. Good thing we’re replacing it 🙂 Good old Plain HTML is holding up strong, doing better now than the Justify version. Float can’t be bothered, so it seems. Now, push the limits:

Schermafbeelding 2015-06-17 om 10.52.37

Why did we ever do Tables; who invented that?! I mean, the Plain HTML beats the hell out of it. The CSS Float version appears to be ticking all the boxes. Yay.

So what are the secrets? First of all, obviously, there’s a “float: right;” on the input elements. An important thing is the “display: flex;” on the parent element of the form (the main element in this case), since otherwise, the inputs would float all the way to the end:

Schermafbeelding 2015-06-17 om 11.06.42

The other main trick is to keep the floating pieces “in their own row”, through “display: flex; flex-direction: column;” on the form element, to prevent any messiness like this:

Schermafbeelding 2015-06-17 om 11.13.22

Lastly, the input elements are kept in view through “max-width: 95%;”, since we don’t want to see anything like this:

Schermafbeelding 2015-06-17 om 11.17.13

Advertisements

3 thoughts on “Right-align form elements with CSS

  1. It would be useful if you also showed how you do the labels. e.g. On my sample, using <label for=”name”>Name:</label> the labels end up stacked above the input fields. <sigh>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s