2 buttons in a form - html

Question

I currently have a form with 1 button, and if I try to add another button the whole css gets screwed.
This is how I want it to look like: http://prntscr.com/gfuvi8
But if add this line under the submit button <i class="fa fa-refresh"></i> Fetch Exchange
This is what I get : http://prntscr.com/gfuwka
.tablesection {
padding: 20px;
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
background: #ffffff;
}
.tablesection label {
width: calc(50% - 10px);
float: left;
margin: 0px 0px 10px 0px;
}
.tablesection label:nth-child(odd) {
margin: 0px 20px 10px 0px;
}
.tablesection input, .tablesection select, .tablesection textarea {
width: calc(50% - 10px);
margin: 0px 0px 20px 0px;
padding: 10px;
display: block;
float: left;
border: 1px solid #cecece;
-webkit-border-radius: 0;
border-radius: 0;
}
.tablesection textarea {
resize: vertical;
}
.tablesection input:nth-child(odd), .tablesection select:nth-child(odd) {
margin: 0px 20px 20px 0px;
}
.tablesection input {
padding: 11px 10px;
width: calc(50% - 10px);
}
.tablesection input.submit {
width: auto;
border: 0px;
margin: 0px 0px 0px 0px;
background: #54809b;
color: #ffffff;
text-decoration: none;
display: block;
float: none;
font-size: 11px;
padding: 12px 20px;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
clear: both;
}
.tablesection input.submit:hover {
background: #4d758d;
}
.tablesection input.submit::before {
display: block;
content: ' ';
clear: both;
}
<div class="tablesection">
<form action="" method="post">
<label for="usd">USD</label>
<label for="cad">CAD</label>
<input id="usd" type="text" name="usd" value="<?php echo $siteUsd; ?>" maxlength="10" required="required" />
<input id="cad" type="text" name="cad" value="<?php echo $siteCad; ?>" maxlength="10" required="required" />
<label for="gbp">GBP</label>
<label for="eur">EUR</label>
<input id="gbp" type="text" name="gbp" value="<?php echo $siteGbp; ?>" maxlength="10" required="required" />
<input id="eur" type="text" name="eur" value="<?php echo $siteEur; ?>" maxlength="10" required="required" />
<label for="aud">AUD</label>
<label for=""></label>
<input id="aud" type="text" name="aud" value="<?php echo $siteAud; ?>" maxlength="10" required="required" />
<div class="clear">
</div>
<input type="submit" class="submit" value="Update Exchange Rates" />
<i class="fa fa-refresh"></i> Fetch Exchange
</form>
</div>
.content a.button:first-of-type {
margin: 20px 0px 0px 0px;
}
.content a.button {
background: #54809b;
color: #ffffff;
text-decoration: none;
display: block;
float: left;
margin: 20px 0px 0px 16px;
font-size: 11px;
padding: 12px 20px;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
.content a.button:hover {
background: #4d758d;
}
.content a.button i {
margin: 0px 4px 0px 0px;
font-size: 10px;
}
when there are just 2 buttons like this :
<i class="fa fa-search"></i> Search Coupons
<i class="fa fa-plus"></i> Add Coupon
then its fine and they're near each other the problem is at form

Answer 1

The input.submit element isn't floated, while the a.button is. This pushes the a.button to be below the input.submit, and the margins are not consistent so they wouldn't line up if this wasn't happening. I'll suggest two ways to fix it, one minimal (only two css attributes changed), and one that I think is easier to read and maintain but changes the structure of your CSS somewhat.
For either way, I suggest changing the margins. Putting the 16px margin on the right eliminates the need for removing it from the first element with a separate rule, and margins that overflow the containing element don't matter as they aren't included when calculating width and height.
Minimal version
Step 1: set the input.submit to float: left, like the .button
Step 2: change the margin for input.submit to match the .button, or vice versa,
eg, input.submit { margin: 20px 16px 0px 0px; }`
.tablesection input.submit {
width: auto;
border: 0px;
margin: 20px 16px 0px 0px; /* copy the a.button margins */
background: #54809b;
color: #ffffff;
text-decoration: none;
display: block;
float: left; /* left instead of none keeps subsequent floats on the same line */
font-size: 11px;
padding: 12px 20px;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
clear: both;
}
That'll get them inline, after that you'll probably want to set both to a consistent height.
Better (in my opinion) version
You have a lot of shared styles between input.submit and a.button - You may consider combining these into a common .button class (note the absence of a tag in this selector, this means the rule applies to anything with the class).
Here I would set a consistent float: left; and consistent margins (eg 20px 16px 0px 0px)
If you still need to do specific styles for input.submit, you can give the element both classes and they will be applied separately.
.content .button {
background: #54809b;
color: #ffffff;
text-decoration: none;
display: block;
float: left;
margin: 20px 16px 0px 0px;
font-size: 11px;
padding: 12px 20px;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
.content .button:hover {
background: #4d758d;
}
.content .button i {
margin: 0px 4px 0px 0px;
font-size: 10px;
}
.tablesection input.submit {
/* Styles that are unique to input.submit */
}
<div class ="content">
<div class="tablesection">
<input type="submit" class="button submit" value="Update Exchange Rates">
<a href="?do=fetch" class="button">
<i class="fa fa-refresh"></i>
Fetch Exchange
</a>
</div>
</div>
EDIT: Both of these solutions share a flaw, which is that float elements do not affect the height of their container. To get around this, you can either place a dummy element after them to pad the container, eg: <div style="height:60px;"></div>. The important thing in this method is that the height of the dummy div be the same as the height + top margin of the floated elements.
Alternatively, you can remove the float:left altogether and set both to display:inline-block instead, which is much easier to work with than floats when doing the layout.

Answer 2

You can make their positions relative and add a float style:
.btn-float {
position: relative;
width: auto;
float: left;
padding-left: 15px;
}
<input class="btn-left" type="submit" class="submit" value="Update Exchange Rates" />
<a class="btn-right" href="?do=fetch" class="button"><i class="fa fa-refresh"></i> Fetch Exchange</a>

Answer 3

.button {
width: 23%;
display: block;
text-align: center;
line-height: 3rem;
height: 3rem;
font-size: 1.2rem;
border: 1px solid #ccc;
background: #fafafa;
}
.button-container{
margin-bottom: 20px;
width: 100%;
}
.button-container::after{
content: '';
display: block;
visibility: hidden;
clear: both;
}
.button-float{
margin-left: 2%;
float: left;
}
<div class="button-container">
<button class="button button-float">BTN-1</button>
<button class="button button-float">BTN-2</button>
</div>
<div class="button-container">
<i class="fa fa-refresh"></i> Fetch Exchange
<i class="fa fa-refresh"></i> Fetch Exchange
</div>
I think i know where is wrong.
You should wrap those two buttons in a dive or something else, and set float left, then clear the float on the DIV.
if you using bootstrap, you can just wrap those buttons in a col-md-12
The goal is to let button float, then clear the float on its father container.
added
OK, just add .button-container,.button-container::after,.button-float in your css file, and wrap your 2 btns with div with .button-container class, add .button-float class to your 2 btns, that will do.
Hope this can help you.