Centering title when next to toolbar - html

Question

I'm trying to make a title bar with a nice centered title and a toolbar next to it. The issue I'm having is that as the toolbar grows, the title move further and further off center (and is never really centered to begin with). I've been monkeying with this for a while, tried a few searches, but can't seem to find an answer. Can someone with a bit more css experience throw me a bone please?
HTML
<div>
<span>
Section Title
</span>
<div class="toolbar">
<button>Add</button>
<button>Remove</button>
</div>
CSS
div { background:red;overflow:hidden; text-align: center; }
span a {
background:#222;
color:#fff;
display:inline-block;
margin:10px 10px 0 0;
padding:5px 10px
}
.toolbar {
float: right;
}
Here's a fiddle:
http://jsfiddle.net/scottvossen/cePe3/124/

Answer 1

You're going to want to use position: relative on the outer div and position: absolute on the inner div. You can learn more about positioning divs here.
FIDDLE. I also centered the text vertically.
HTML
<div id="background">
<div id="centeroutline">
<div id="centertext">
Section Title
</div>
</div>
<div class="toolbar">
<div id="buttons">
<button>Add</button>
<button>Remove</button>
</div>
</div>
</div>
CSS
#background {
position:relative;
background:red;
overflow:hidden;
text-align: center;
height:26px;
width:auto;
}
#buttons{
position:relative;
}
#centeroutline {
color:#fff;
display: table;
width:100%;
}
#centertext{
margin:10px 10px 0 0;
padding:5px 10px;
display: table-cell;
vertical-align: middle;
width:100%;
text-align:center;
}
.toolbar {
right:0;
top:0;
position:absolute;
}

Answer 2

You can add position: relative to the containing div. Then absolute position the toolbar in the corner.
div{
position: relative
}
.toolbar{
position: absolute;
top: 0;
right: 0;
}
FIDDLE