Html Three elements on the same line - html

Question

I am trying to put three h4 elements on the same line, I tried using display:inline-block; on all of them, but that only put two of the elements on the same line, the third one is under them.
Here is my HTML
<h4 id="vbottomcreator"><a style="color:orange;">></a> Created by <a style="color:orange;"><</a></h4>
<h4 id="vbottomdates" align="center"><a style="color:orange;">></a> tasdf <a style="color:orange;"><</a></h4>
<h4 id="vbottomdevelopment"><a style="color:orange;">></a> Website still in Development <a style="color:orange;"><</a></h4>
The third element is under the rest
CSS
#vbottomdates
{
color:black;
display:inline-block;
margin-left:362px;
}
#vbottomcreator
{
color:black;
margin-left:30px;
display:inline-block;
}
#vbottomdevelopment
{
color:black;
margin-left:1100px;
display:inline-block;
clear:none;
}
QUESTION SOLVED

Answer 1

Try like this: Updated Demo
HTML:
<div class="center">
<h4>...</h4>
<h4>...</h4>
<h4>...</h4>
</div>
CSS:
#vbottomdates {
color:black;
display:block;
float:left;
}
#vbottomcreator {
color:black;
display:inline-block;
}
#vbottomdevelopment {
color:black;
display:block;
float:right;
display:inline-block;
}
.center {
width:100%;
margin:0 auto;
display:inline-block;
text-align:center;
}
Margin value is more for the last id.. Try to reduce the value like this.. all the 3 elements were placed properly

Answer 2

I am wondering why are you using margin-left to place all elements horizontally. You will seriously have to change it in future, as it will enable horizontal scroll if window size is reduced. In other words, your page will never be responsive.
remove all margin-left property and give some width in percentage such that total width of all blocks remains less than 100% width of window.
This will ensure that even if user reduces window size, your elements will be in correct position.
Check DEMO here
HTML
<h4 id="vbottomcreator" class="vbottom"><a style="color:orange;">></a> Created by <a style="color:orange;"><</a></h4>
<h4 id="vbottomdates" align="center" class="vbottom"><a style="color:orange;">></a> tasdf <a style="color:orange;"><</a></h4>
<h4 id="vbottomdevelopment" class="vbottom"><a style="color:orange;">></a> Website still in Development <a style="color:orange;"><</a></h4>
CSS
#vbottomdates
{
color:black;
display:inline-block;
}
#vbottomcreator
{
color:black;
display:inline-block;
}
#vbottomdevelopment
{
color:black;
display:inline-block;
clear:none;
}
.vbottom {
width : 30%;
}

Answer 3

Reduce the margin left value:
#vbottomdevelopment
{
color:black;
margin-left:500px;
display:inline-block;
clear:none;
}