Pulling a div within an H1 tag to the right

Question

I have a header, and then I have a div within that header. The header's text displays on the left, as it should. However, I would like the div to appear on the same line as the header but pulled to the right. What is the css I should use to achieve this? Thank you!

<h1 id="header">
  Text
  <div class="headerDiv">
  </div>
</h1>

Answer 1

Your implementation might work, but is not recommended. I would suggest have the div outside your header. If need be, you can always encapsulate these inside a main wrapper div.

<h1 style="float:left;">Some Text</h1>
<div style="float:right; width:100px; height:50px; background:#CCC;"></div>
<div style="clear:both;"></div>

Here is an example to look at: jsfiddle

Hope it helps.

Answer 2

This should work.

<h1>
  <span>Some Text</span>
  <div>Some Div</div>
</h1>

h1 > span {
  float: left;
}

h1 > div {
  float: right;
}

Doing so you should also be adding a clearfix to the h1 :

h1:after {
  content: '';
  display: block;
  clear: both;
}