Float right moves the span element up?

Question

Hi i have beeen trying to make span and h1 element on the same line. However float:right will result span to move top. I have tried with different approach, i dont want to use margin property. Any sugesstions on this?

.pull-left {
  float: left;
  width: 70%;
}

.pull-right: {
  float: right;
  width: 20%;
}

<div class="block">
  <h1 class="pull-left">Carl</h1>
  <span class="pull-right">$4.81</span>
  <div style='clear:both'></div>
</div>

Any help would be appreciated.

Answer 1

Its just the default margin of h1 tag that is doing this, you need to remove that.

If you wanna vertically center the span based on h1 then just use line-height:font-size of h1

Fiddle Here

.block h1
    {
      margin:0px;
    }
    .block span
    {
      line-height:2em;
    }
    .pull-left{
      float:left;
      width:70%;
    }
    .pull-right:{
      float:right;
      width:20%;
    }

<div class="block">
  <h1 class="pull-left">Carl</h1>
  <span class="pull-right">$4.81</span>
  <div style='clear:both'></div>
</div>

Answer 2

Use display inline css value:

<h1 class="pull-left" style="display:inline">Carl</h1>
<span class="pull-right" style="display:inline">$4.81</span>