I have two buttons - one for Twitter and the other a normal submit button. I am struggling to align them horizontally on the same line.
After experimenting with various combinations of margin settings for ".buttonLine", ".twitter-share-button", and "#newQuoteButton", I still can't get them to line up side by side.
All I want is to place them in a horizontal line, with one on the left and the other on the right.
Please advise me on how to achieve this alignment.
Check out the demo fiddle at this link
Here's the code:
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) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
function myFunction() {
//nothing
}.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;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>PageTitle</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<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>
</div>
</div>
<footer>
<p class="text-center">Compiled by: Someones Name</p>
</footer>
</div>
</body>
</html>