сделать кнопку и div одинаковой высоты бок о бок

Question

В правом нижнем углу у меня есть 1 кнопка, чтобы открыть чат, затем div, где отображаются текущие онлайн-пользователи, а затем еще одна кнопка, чтобы попасть в начало страницы.

Я использую тег <button> на кнопках, но для разных кнопок и для разметки используется другое значение. Если я использую ту же прокладку, div будет больше, а не сильно, но меня это раздражает.

Есть ли простой способ исправить это? Они все position:fixed;

Вот мой код:

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> \t \t \t \t 
 
     </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

Используйте DIV элемент не кнопка один :)