Center div in parent while ignoring floating elements

Question

I am trying to create a section div with a heading, this heading has a central name and may or may not have a jquery user interface button on the right side. The width of the section is determined by its parent.

My problem is that the title with the button centered on the button takes into account the width of the button.

Html:

<div style="width: 600px;">
    <div class="section purple">
        <div class="sectionHeader">
            <div>Normal Title</div>
        </div>
        <div class="sectionContent"></div>
    </div>
    <div class="section blue">
        <div class="sectionButtonIcon"> <a id="btnExample">Jquery UI Button</a>
        </div>
        <div class="sectionHeader">
            <div>Title With Button</div>
        </div>
        <div class="sectionContent"></div>
    </div>
</div>

See jsFiddle for css: http://jsfiddle.net/agAgeas50/uL9Uc/8/

Note: this is not a duplicate of the center of the inline-block div in the parent, ignoring floating elements . If you look at jsfiddle in the accepted answer, wrap the parent element in another div and give the top level div a fixed width, the right element will appear outside the parent.

Answer 1

/

.section.blue {
   position:relative;
}

.sectionButtonIcon {
     position:absolute;
    right:0px;
}

http://jsfiddle.net/uL9Uc/9/