CSS - How to line up buttons? - css

Question

I am trying to create a form with multiple rows. Each row has an optional input field followed by a mandatory button. The buttons should line up vertically - something like this:
_____________ _______________
| input 1 | | button 1 |
|___________| |_____________|
_______________
| button 2 |
|_____________|
I tried to float the button left with a fixed left margin, but doing so moves the input field to the right of the button - even though the input field appears first in the markup:
<div>
<input type="text">
<button>Action 1</button>
</div>
Please see my jsfiddle here. Why is this happening and what's the correct solution?

Answer 1

You need thee div container to do this as shown in this jsFiddle.
HTML Code
<div class="container">
<div class="left">
<button>
</div>
<div class="right">
<button>
</div>
</div>
CSS Code
.container {
width: 190px;
height: 22px;
margin: 0;
}
.left {
float: left;
width: 95px;
height: 22px;
}
.right {
float: right;
width: 95px;
height: 22px;
}
​

Answer 2

Use rows.
<div class="row-rap">
<div class="right">
<input type="text">
</div>
<div class="left">
<input type="button" value="Action 1">
</div>
</div>
<div class="row-rap">
<div class="right">
<input type="text">
</div>
<div class="left">
<input type="button" value="Action 2">
</div>
</div>​
With the following styling.
div.row-rap {
width: 100%;
}
div.row-rap .right, div.row-rap .left {
width: 50%;
float: left;
}

Answer 3

Here's an alternative, the margins and colors may need modification. See jsfiddle link for sample result.
It has a left-aligned label and right-aligned input (button style) in a div, for each line. The non-breaking space is needed as a placeholder in the span element that represents an "empty label".
http://jsfiddle.net/qallar/kfgCb/5/
The html is:
<div class='line'>
<span class='formlabel'>label 1</span>
<input class='formbutton' type='button' value='button 1 text ' />
</div>
<div class='line'>
<span class='formlabel'> </span>
<input class='formbutton' type='button' value='button 2 text' />
</div>
and the css:
.line
{
display: block;
background-color: #ddd; /* also try #fff */
margin: 0px;
padding: 2px;
height: 30px;
width: 200px;
}
.formlabel
{
float: left;
background-color: #eee; /* also try #fff */
margin: 0px;
padding: 2px;
width: 75px;
height: 100%;
clear: both;
}
.formbutton
{
float: right;
background-color: #0f0;
margin: 0px;
padding: 0px;
width: 100px;
height: 100%;
}

Answer 4

The input field is flying to the right of the button because it is an inline element. Float works on block elements only, inline elements will always flow around the floated elements. This explains the behavior in the original jsFiddle.
Having said that, even if I put display:block on the input element it still behaves like inline. I was able to make the basic concept work for a div though, which is a true block element. See the jsFiddle here.
<div class="row">
<button>Action 1</button>
<div class="in"></div>
</div>
.row {
clear: both;
}
.in {
background-color: green;
height: 24px;
width: 100px;
}
button {
float: left;
margin-left: 110px;
width: 150px;
}
The only workaround seems to be the one offered by Musa (see this jsFiddle) where he aligns the buttons to the right using text-align and limiting the width of the div.

Answer 5

I am not a CSS expert and usually this task works for me using table
<table>
<tr><td>Optional Input</td><td>Button</td></tr>
<tr><td>Optional Input</td><td>Button</td></tr>
</table>
if table by some reason is not an option you can use div/span
<div style="display: table-row">
<span style="display: table-cell">Optional Input</span>
<span style="display: table-cell">Button</span>
</div>
It will about like this

Answer 6

using Block formatting context https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_context
jsfiddle code: http://jsfiddle.net/EeNFH/9/
the html code:
<div class="inp">
<input type="text">
</div>
<div class="btns">
<p><button>Action 1</button></p>
<p><button>Action 2</button></p>
</div>
and the styles:
input {
width: 100px;
}
button {
width: 150px;
}
.inp{
float:left;
}
.btns{
overflow:hidden;
}
​