Align two elements on the same line

Question

I am trying to align two different

elements on the same line. I got it to work but it completely messed up my logo. The two

element

Answer 1

If I were you I would get rid of ALL of the div align="center"s from your HTML, just have every element without them. And then the float should work better. Even better, you might just want to position: absolute; each of the TEST texts

Answer 2

Your <p> are:

<p style="color:white;" id="countr">test</p> 
<p style="color:white;" id="countl">test</p> 

Use this:

#countr, #countl {
 display: inline-block;
}

If doesn't work, then you can use this for countr

#countr {
float: left;
}

This will make them float inline!

Answer 3

FIDDLE

<div>
  <p style="color:black;float:left;" id="countr">test</p> 
 <p style="color:black;float:right;" id="countl">test</p> 
</div>
    <h1 align="center" style="margin:0 auto;clear:both;"><span class="icon icon-size"></span><a href="#">Clubbed<span> In</span></a></h1>
<div align="center">
    <h2 class="motto" style="color : black">Connect. Communicate. Lead.</h2>
</div>