I would like to create a container where the module title is top left and the visibility/minimize and help button is top right just like in a standard window titlebar you know from you OS. See the example below. Now I really don't get it how to realize that with DIVs. The icons always come directly after the title instead to be right aligned. Can someone help?

______________________________
TITLE                   [?][X]
______________________________
CONTENTPANE
.
.
.
.
______________________________
                        [EDIT]
______________________________

Thanks for the example. Actually, I tried the same the first time yesterday, but it surprisingly did not work (left DIV (title) always got the width of the title inside instead of expanding to the whole width available; right DIV (actions) seemed to get 100% width so actually overlapping the title DIV as Firebug said so, right DIV (actions) did not align the icons to the right although text-align:right).

Well, as I already deleted the files yesterday (to use a table layout instead) I now wrote it again to show it to you and, wow, the above issues does not occur anymore.

Anyways: If the title is too big for the container width, then the title gets 100% of the width forcing the action-icons to the next row. Switching the order of the voth DIVs in the HTML code (so action DIV comes first) does not solve the problem but forces the action-icons on top. Even assigning a width to the actions-DIV does not solve it, they still are foreced to the next (or, vice versa, previous) row.

<div id="container">
    <div id="container_head">
    <div id="container_head_actions">[VISIBILITY][ACTIONBUTTON:1]</div>
        <div id="container_head_title">[TITLE]</div>
       
        <div id="clear"></div>
    </div>
    <div id="container_body">[CONTENTPANE]</div>
    <div id="container_foot">
        <div id="container_foot_actions2">[ACTIONBUTTON:2][ACTIONBUTTON:3]</div>
    </div>
</div>

#container,
#container_head,
#container_body,
#container_foot
{ width: 100%; padding: 0px; margin: 0px; }

#container
{
    padding-top:10px;
    padding-right: 10px;
    background-image:url(images/rounded_corner.png); background-repeat:no-repeat; background-position: top right; }

#container_head_title
{ float: left; }

#container_head_actions
{ float: right; text-align: right; }

#clear
{ clear: both; }

#container_foot_Actions2
{ text-align: right; }