4

I am trying to create a 'section' div with a header, this header has a centred title and may or may not have a jquery UI button on its right hand side. The width of the 'section' div is determined by its parent.

My trouble is that the title with button centre alignment is taking the button's width into account.

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 Center inline-block div in parent while ignoring floating elements . If you look at jsfiddle's in the accepted answer, wrap the parent in another div and give the top level div a fixed width, the right hand element appears outside the parent.

Community
  • 1
  • 1
alpha1python
  • 65
  • 7

1 Answers1

1

add/edit the following

.section.blue {
   position:relative;
}

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

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

caramba
  • 21,963
  • 19
  • 86
  • 127
  • Note that while this solution will work on some screen/container widths, it will cause the button to overlay the title on smaller widths. – Kzqai Feb 26 '14 at 12:27
  • @Kzqai no there is a given width on the most outer container. but the button will overlay if the title gets bigger. – caramba Feb 26 '14 at 12:31
  • @alpha1python you're welcome! let me know if bigger title could be a problem and give options (like brake line or similar) how we,you,me could solve that – caramba Feb 26 '14 at 12:33