Mixing floating and absolute positioning issues - css

Question

I'm trying to float three elements, no problem there. However in the two outside boxes I need to position an element vertically in the center, so I thought I would wrap them both in another div, float the wrapping divs and then absolute position the elements inside them and set the wrapping elements to position: relative; so it wouldn't mess with the layout and the three elements would stay floated correctly.
However it doesn't seem to have happened that way, the middle element still seems to get shoved all the way to the left.
My CSS:
.line_wrap {
float: left;
position: relative;
width: 366px;
min-width: 366px;
max-width: 366px;
}
.line_wrap .line {
position: absolute;
top: 25px;
left: 0;
width: 366px;
min-width: 366px;
max-width: 366px;
border-top: 1px solid #d9dce6;
}
.title {
float: left;
}
.title h2 {
font-weight: 300;
font-size: 37px;
color: #425080;
}
My HTML:
<div class="fee_header">
<div class="line_wrap">
<div class="line"></div>
</div>
<div class="title">
<h2>Standard Fees</h2>
</div>
<div class="line_wrap">
<div class="line"></div>
</div>
<div class="contentClear"></div>
</div>
Fiddle: http://jsfiddle.net/MN88R/
I'm trying to position the two elements on the sides so that the border of them ends up in the vertical center of the text in the middle.

Answer 1

If I understand what you are trying to achieve correctly, then I think you may be just approaching it from the wrong angle and perhaps should try something other than using the 3 floating boxes.
If your goal is to have the title center to it's parent container, and the border then run across the vertical center of the heading text, I would try something more like this:
CSS
.title {
height:20px;
overflow:visible;
border-bottom:1px solid #d9dce6;
margin-bottom:20px;
}
.title h2 {
font-weight: 300;
font-size: 37px;
color: #425080;
text-align:center;
}
HTML
<div class="fee_header">
<div class="title">
<h2>Standard Fees</h2>
</div>
</div>
Here is a link to a new fiddle:
http://jsfiddle.net/2KDQ4/1/
Just make sure that the font-size of your heading and the container div height are in the proportions that meet your needs. And the bottom-margin on title is set with what ever spacing you need.