css - How do I lean a xul element to the right side of a variably sized centered element? -

^{<edit>i decided clean question little bit, easier reading.</edit>}

i have centered <menulist>, of variable width (maxwidth="200"), next want lean couple of <toolbarbuttons> in <hbox>. these elements part of xul <page> element.

the following image shows current result , actual goal is:

^{the vertical red line merely drawn indicate center of window.}

the current result achieved following css , xul:

css:

page {   -moz-appearance: none;   background-color: #fff;   text-align: center; }  toolbarbutton {   list-style-image: url( 'chrome://codifiertest/skin/icons.png' ); } toolbarbutton .toolbarbutton-icon {   width: 16px;   height: 16px; }  toolbarbutton.add {   -moz-image-region: rect( 0px, 16px, 16px, 0px ); }  toolbarbutton.edit {   -moz-image-region: rect( 0px, 32px, 16px, 16px ); }  toolbarbutton.delete {   -moz-image-region: rect( 0px, 48px, 16px, 32px ); }  toolbarbutton.config {   -moz-image-region: rect( 0px, 64px, 16px, 48px ); } 

xul:

<?xml version="1.0" encoding="utf-8"?>  <?xml-stylesheet type="text/css" href="chrome://global/skin/"?> <?xml-stylesheet type="text/css" href="chrome://codifiertest/skin/index.css"?>  <!doctype page>  <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"       xmlns:html="http://www.w3.org/1999/xhtml">    <div xmlns="http://www.w3.org/1999/xhtml">      <h1>title</h1>      <vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"           pack="start"           align="center">        <stack maxwidth="200">         <hbox pack="center" align="center">           <menulist maxwidth="200">             <menupopup>               <menuitem label="item" value=""/>             </menupopup>           </menulist>         </hbox>         <hbox left="200">           <toolbarbutton class="add"/>           <toolbarbutton class="edit"/>           <toolbarbutton class="delete"/>         </hbox>       </stack>      </vbox>    </div>  </page> 

icons.png:

---

^{you can download installable bootstrapped test example:}

^{http://extensions.codifier.nl/test/downloads/test@extensions.codifier.nl.xpi}

^{be aware example xpi install open new tab example xul file after install. , disclaimer: file downloadable insecure location (my own domain), sure validate downloaded before install (i.e. save xpi disk first, before installing).}

---

so, goal have <menulist> horizontally centered page , <hbox> <toolbarbutton>s lean right side of <menulist>, no matter width.

is doable xul , perhaps additional css?

i've gotten work mixing in more (x)html:

css:

#container {   position: relative; }  #container > span {   position: absolute;   left: 100%; } 

altered xul/(x)html:

<html:div id="container"> <!-- no more xul:stack -->   <hbox pack="center" align="center">     <menulist maxwidth="200">       <menupopup>         <menuitem label="item" value=""/>       </menupopup>     </menulist>   </hbox>   <html:span> <!-- additional span -->     <hbox>       <toolbarbutton class="add"/>       <toolbarbutton class="edit"/>       <toolbarbutton class="delete"/>     </hbox>   </html:span> </html:div> 

... i'd rather want see pure xul solution though, if knows one.

thank you, in advance, looking this.

i think should solution:

page.xul

<?xml-stylesheet type="text/css" href="page.css"?> <!doctype page> <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"       xmlns:html="http://www.w3.org/1999/xhtml">     <vbox>         <hbox>             <hbox>                 <menulist>                     <menupopup>                         <menuitem label="item" value=""/>                     </menupopup>                 </menulist>             </hbox>             <hbox>                 <button class="add"/>                 <button class="edit"/>                 <button class="delete"/>             </hbox>         </hbox>         <hbox>             <hbox>                 <menulist>                     <menupopup>                         <menuitem label="item" value=""/>                     </menupopup>                 </menulist>             </hbox>             <hbox>                 <button class="add"/>                 <button class="edit"/>                 <button class="delete"/>             </hbox>         </hbox>     </vbox> </page> 

page.css:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); page {     -moz-appearance: none;     background-color: #fff;     text-align: center;     background-image: url( 'dot.png' );     background-position: top center;     background-repeat: repeat-y; } page > vbox {     -moz-box-flex: 1; } page > vbox {     padding-left: 90px;     -moz-box-align: center;     -moz-box-pack: start; } .buttonsgroup {     -moz-appearance: toolbox; } button {     -moz-appearance: toolbarbutton;     list-style-image: url( 'icons.png' );     min-width: 27px !important;      width: 27px;     height: 16px;     margin: 0px 0px 0px 0px; } button.add {   -moz-image-region: rect( 0px, 16px, 16px, 0px ); } button.edit {   -moz-image-region: rect( 0px, 32px, 16px, 16px ); } button.delete {   -moz-image-region: rect( 0px, 48px, 16px, 32px ); } button.config {   -moz-image-region: rect( 0px, 64px, 16px, 48px ); } 

here how looks (on ff 36, kubuntu 15.04):

hope helps.