html – 在父级中居div而忽略浮动元素

我正在尝试创建一个带有标题的“section”div,此标题有一个居中的标题,右侧可能有也可能没有 jquery UI按钮. ‘section’div的宽度由其父级确定.

我的麻烦是按钮中心对齐的标题考虑了按钮的宽度.

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>

有关css：http://jsfiddle.net/agAgeas50/uL9Uc/8/,请参阅jsfiddle

注意：这不是Center inline-block div in parent while ignoring floating elements的副本.如果你在接受的答案中查看jsfiddle,将父级包装在另一个div中并给顶级div一个固定宽度,右手元素出现在父级之外.

解决方法

添加/编辑以下内容

.section.blue {
   position:relative;
}

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

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