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/
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:
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:
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:
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:
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:
Lastly, the input elements are kept in view through “max-width: 95%;”, since we don’t want to see anything like this: