3 DIV side by side wont align correctly - html

Question

I'm sure this is a facepalm moment for me, but a need some fresh eyes to have a look and tell me what I'm doing wrong... because I can't spot it!
That last button on the right needs to be in line with the other two, please help.
body {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
p {
line-height: 1.65em;
margin: 0 0 1em 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 1em 0;
font-weight: normal;
}
/* BUTTON CONTAINER */
#buttoncointainer {
width: 100%;
}
.buttontext {
font-size: 175%;
font: #fff;
}
/* LEFT BUTTON */
#arrowleft {
float: left;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-right: 3px;
position: relative;
}
#arrowleft:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.leftarrow {
float: left;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.leftarrow a:hover {
color: #006ec3;
}
.leftarrow a {
text-decoration:none;
color: #fff;
}
/* SHARE BUTTON */
#sharebutton {
width: 40%;
margin: 0 auto;
text-align: center;
background: #005698;
height: 40px;
border: 1px solid #005698;
}
#sharebutton:hover {
width: 40%;
text-align: center;
background: #006ec3;
height: 40px;
}
.fb-share-text {
color: #fff;
text-align: center;
}
.sbutton {
margin: 0 auto;
}
.sbutton a {
text-decoration:none;
display:block
}
.sbutton a:hover {
text-decoration:none;
display:block;
color: #006ec3;
}
/* RIGHT BUTTON */
#arrowright {
float: right;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-left: 3px;
position: relative;
}
#arrowright:hover {
float: right;
width: 20%;
height: 40px;
background: #ECECEC;
}
.rightarrow {
float: right;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.rightarrow a:hover {
color: #006ec3;
}
.rightarrow a {
text-decoration:none;
color: #fff;
}
<div id="buttoncointainer">
<div id="arrowleft">
<div class="leftarrow">
<p class="buttontext">
◄
</p>
</div>
</div>
<div id="sharebutton">
<div class="sbutton">
<p class="buttontext">
Share
</p>
</div>
</div>
<div id="arrowright">
<div class="rightarrow">
<p class="buttontext">
►
</p>
</div>
</div>
</div>

Answer 1

Change the order of your html for your code to take hold...
The float:right; element should be before the center aligned element.
body {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
p {
line-height: 1.65em;
margin: 0 0 1em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 1em 0;
font-weight: normal;
}
/* BUTTON CONTAINER */
#buttoncointainer {
width: 100%;
}
.buttontext {
font-size: 175%;
font: #fff;
}
/* LEFT BUTTON */
#arrowleft {
float: left;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-right: 3px;
position: relative;
}
#arrowleft:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.leftarrow {
float: left;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.leftarrow a:hover {
color: #006ec3;
}
.leftarrow a {
text-decoration: none;
color: #fff;
}
/* SHARE BUTTON */
#sharebutton {
width: 40%;
margin: 0 auto;
text-align: center;
background: #005698;
height: 40px;
border: 1px solid #005698;
}
#sharebutton:hover {
width: 40%;
text-align: center;
background: #006ec3;
height: 40px;
}
.fb-share-text {
color: #fff;
text-align: center;
}
.sbutton {
margin: 0 auto;
}
.sbutton a {
text-decoration: none;
display: block
}
.sbutton a:hover {
text-decoration: none;
display: block;
color: #006ec3;
}
/* RIGHT BUTTON */
#arrowright {
float: right;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-left: 3px;
position: relative;
}
#arrowright:hover {
float: right;
width: 20%;
height: 40px;
background: #ECECEC;
}
.rightarrow {
float: right;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.rightarrow a:hover {
color: #006ec3;
}
.rightarrow a {
text-decoration: none;
color: #fff;
}
<div id="buttoncointainer">
<div id="arrowleft">
<div class="leftarrow">
<p class="buttontext">
◄
</p>
</div>
</div>
<div id="arrowright">
<div class="rightarrow">
<p class="buttontext">
►
</p>
</div>
</div>
<div id="sharebutton">
<div class="sbutton">
<p class="buttontext">
Share
</p>
</div>
</div>
</div>

Answer 2

I've made you a fiddle here http://jsfiddle.net/vmb0sfag/3/
Use float left on your main elements:
body {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
p {
line-height: 1.65em;
margin: 0 0 1em 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 1em 0;
font-weight: normal;
}
/* BUTTON CONTAINER */
#buttoncointainer {
width: 100%;
}
.buttontext {
font-size: 175%;
font: #fff;
}
/* LEFT BUTTON */
#arrowleft {
float: left;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-right: 3px;
position: relative;
float: left;
}
#arrowleft:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.leftarrow {
float: left;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
float: left;
}
.leftarrow a:hover {
color: #006ec3;
}
.leftarrow a {
text-decoration:none;
color: #fff;
}
/* SHARE BUTTON */
#sharebutton {
float: left;
width: 40%;
margin: 0 auto;
text-align: center;
background: #005698;
height: 40px;
border: 1px solid #005698;
}
#sharebutton:hover {
width: 40%;
text-align: center;
background: #006ec3;
height: 40px;
}
.fb-share-text {
color: #fff;
text-align: center;
}
.sbutton {
margin: 0 auto;
}
.sbutton a {
text-decoration:none;
display:block
}
.sbutton a:hover {
text-decoration:none;
display:block;
color: #006ec3;
}
/* RIGHT BUTTON */
#arrowright {
float: right;
width: 20%;
height: 40px;
background: #FFFFFF;
border: 1px solid #005698;
margin-left: 3px;
position: relative;
float: left;
}
#arrowright:hover {
float: left;
width: 20%;
height: 40px;
background: #ECECEC;
}
.rightarrow {
float: right;
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 40px;
}
.rightarrow a:hover {
color: #006ec3;
}
.rightarrow a {
text-decoration:none;
color: #fff;
}