How to align 2 buttons next to each over horizontally? - html

Question

Im wanting it to look like:
[BUTTON]
or
[Button 1] [Button2]
But im not sure how do so.
My code:
HTML:
<p> ← Get Started</p>
<h3>or</h3>
<p> <i class="fa fa-code-fork"></i> Log In / Sign Up</p>
<p> <i class="fa fa-user-plus" ></i> Sign Up</p>
CSS:
#bottom-btn1{
margin-top: 10px;
margin: 20px;
margin-left: 340px;
display: inline-block;
float: left;
}
#bottom-btn2{
margin-top: 10px;
margin: 20px;
margin-right: 40px;
display: inline-block;
float: right;
}
JSFiddle link: https://jsfiddle.net/d2L7ynu3/
Thank you to the people that help me. It means alot :D

Answer 1

So this is a good opportunity to learn in CSS positioning; something I've fought with for years in order to learn. There's two main methods of achieving this effect but they have some gotchas. Using the following HTML (I've taken out the p tags).
Get Started
<span>or</span>
Log In
Sign Up
The inline-block method will work here, but we'll need to make a small change in order to get the links to line up next to each other. inline-block preserves white space, so you'll see a gap between the elements. Adding HTML comments between the elements will remove the white space (or you can just put the elements side-by-side without the line break for readability).
Get Started
<span>or</span>
Log In<!--
-->Sign Up
Now we can add CSS.
a{
display:inline-block;
}
#get_started{
width:100%;
}
#log_in, #sign_up{
width:50%;
}
If you didn't put the HTML comments in, you'll notice the sign_up link drop below the log_in because of the hidden white space.
If you go with the float method instead, then you'll need some extra markup.
Get Started
<span>or</span>
<p class="cf">
Log In
Sign Up
</p>
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
a{
display:block;
}
#get_started{
width:100%;
}
#log_in, #sign_up{
float:left;
width:50%;
}
The cf class stands for clearfix, which is a hack developed to help create height for parent elements with floated children.

Answer 2

The p element is making the buttons to be draw in different lines. You can try
p {
display: inline-block;
}
I suggest to place a selector class in those p so you will not need to overwrite the css for all th p elements

Answer 3

don't forget text-align : center; it saves most of the times.
i just tided up your code.. that might help you improve your coding.. just change the .wrap size if you do any changes on buttons. hope it helps
p, .back, h3 {
text-align: center;
}
.wrap {
margin: 0 auto;
width: 172px;
}
.btn {
float: left;
margin-left: 5px;
}
<p> ← Get Started
</p>
<h3>or</h3>
<p class="wrap">
<i class="fa fa-code-fork"></i> Log In / Sign Up
<i class="fa fa-user-plus" ></i> Sign Up
</p>

Answer 4

Try this
<div class="buttonbox">
<p> ← Get Started</p>
<h3>or</h3>
<p> <i class="fa fa-code-fork"></i> Log In / Sign Up</p>
<p> <i class="fa fa-user-plus" ></i> Sign Up</p>
</div>
CSS
.buttonbox {
text-align: center;
}
.buttonbox > p {
display: inline-block;
float: none!important;
}
don't call float: left; for those buttons.

Answer 5

HTML:
<div class="wrap">
← Get Started
<h3>or</h3>
<div>
<i class="fa fa-code-fork"></i> Log In / Sign Up
<i class="fa fa-user-plus" ></i> Sign Up
</div>
</div>
CSS:
.wrap {
max-width: 1000px; /* any size you want */
width: 96%; /* 960px */
margin: 0 auto;
text-align: center;
overflow: hidden;
padding: 1%;
}
.wrap h3 {
margin: 10px 0;
}
.wrap a {
padding: 20px 0;
}
.wrap > a {
border: 1px solid #ddd;
display: block;
width: 60%;
margin: 0 auto;
}
.wrap div a {
width: 48%;
float: left;
outline: 1px solid #ddd;
margin: 0 1%;
}
Result looks like this:
[BUTTON]
or
[Button 1] [Button2]

Answer 6

#bottom-btn1, #bottom-btn2{
padding: 10px;
border: solid black 3px;
background-color: #83D8B7;
color: #134A1E;
}
a{
text-decoration: none
}
<br>
<i class="fa fa-code-fork"></i> Log In / Sign Up
<i class="fa fa-user-plus" ></i> Sign Up