300 300 - 1 year ago 76
HTML Question

How to align twitter button and normal button horizontally?

I have a twitter button and a normal submit button and I am trying to align them horizontally (in same line).

But even after trying different combinations of margin on ".buttonLine", ".twitter-share-button" and "#newQuoteButton" they are never aligned horizontally.

All I want to do is align them horizontally (in same horizontal line) and then place the in left and right side.

Please suggest how I can do this.

Demo fiddle is at fiddle


<!DOCTYPE html>
<html lang="en">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
.my-content {
background-color: light-blue;
margin: 250px 50px 100px 50px;
border-radius: 10px;

.quote {
margin: 0px 50px 0px 50px;
text-align: center;

.quoteBy {
margin: 0px 25px 0px 0px;
text-align: right;

.buttonLine {
margin: 50px 0px 0px 0px;

.twitter-share-button {
margin: 0px 0px 0px 50px;

#newQuoteButton {
margin: 0px 200px 100px 0px;
<div class="container-fluid">
<div class="my-content">
<h1 class="quote" id="idQuote">Quick Brown Fox Jumped Over The Lazy Dog! Quick Brown Fox Jumped Over The Lazy Dog!</h1>
<h4 class="quoteBy" id="idQuoteBy">....The Quick Fox</h4>
<div class="buttonLine" style="clear:both">
<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Hello%20world" data-size="large">Tweet</a>
<button id="newQuoteButton" onclick="myFunction()">New Quote</button>

<p class="text-center"> Compiled by: Someones Name</p>
<script type="text/javascript">
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);

t._e = [];
t.ready = function(f) {

return t;
}(document, "script", "twitter-wjs"));

function myFunction() {

Answer Source

Or try this fiddle:


#newQuoteButton {

    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download