make button and div same height side by side - html

Question

In the bottom right corner I have 1 button to open a chat, then a div where it displays the current online users and then another button to get to the top of the page.
I use the <button> tag on the buttons but the padding is different for button and div. If I use the same padding the div will be larger, not by much but it annoys me.
Is there any easy way to fix this? They are all position:fixed;
Here is my Code:
jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('#backToTop').fadeIn('slow');
} else {
$('#backToTop').fadeOut('slow');
}
});
$('#backToTop').click(function() {
$("html, body").animate({
scrollTop: 0
}, 500);
//$("html, body").scrollTop(0); //For without animation
return false;
});
});
.chat-wrapper {
position: fixed;
display: inline-block;
width: 100%;
right: 0;
bottom: 0;
z-index: 1000;
}
.top {
float: right;
background-color: #1d1d1d;
border-top: 1px solid #000;
background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
background-image: linear-gradient(to top, #1a1b1f, #212528);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
z-index: 2000;
}
.chat-online {
width: 75px;
float: right;
padding: 7px;
border-left: 1px solid #000;
border-right: 1px solid #000;
background-color: #1d1d1d;
border-top: 1px solid #000;
background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
background-image: linear-gradient(to top, #1a1b1f, #212528);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
z-index: 2000;
}
#button {
background: none;
border: none;
padding: 8px;
color: #05c7f7;
}
#backToTop {
background: none;
border: none;
padding: 8px;
color: #05c7f7;
}
#button:hover {
color: #fff !important;
-webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
-moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#backToTop:hover {
color: #fff !important;
-webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
-moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#button:active {
color: #fff !important;
-webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
-moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#backToTop:active {
color: #fff !important;
-webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
-moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#button:focus {
outline: 0;
}
#backToTop:focus {
outline: 0;
}
.chat-icon {
float: right;
border-left: 1px solid #000;
background-color: #1d1d1d;
border-top: 1px solid #000;
background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
background-image: linear-gradient(to top, #1a1b1f, #212528);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
z-index: 2000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat-wrapper">
<div class="chat-content">
<div class="top">
<button class="fa fa-chevron-up" id="backToTop" name="top" aria-hidden="true"></button>
</div>
<div class="chat-online" tooltip="Current users online (<5min)">
Online : <span class="fr" id="status">
<script type="text/javascript">
var int = self.setInterval("update()", 1000);
function update() {
$('#status').load('/online.php');
}
</script>
</span>
</div>
<div class="chat-icon">
<button class="fa fa-comments-o" id="button" name="chat" aria-hidden="true"></button>
</div>
</div>
</div>

Answer 1

Use a div element not a button one :)