Providing spaces between elements - spacer not working

programming web dev
1

Hi,

I have to create a small layout in the following order (sample_layout.JPG)

This is the xml I am loading using JQuery

<titlebar>
    <item type="image" image="assets/images/Logo.png"/>
    <item type="image" image="assets/images/title.png"/>
    <item width="100%" type="separator"/>
    <item type="header"/>
    <item width="100%" type="separator"/>
    <item type="image" tooltip="" target="some url" image="pis.png" command="URL_LINK"/>
    <item type="image" tooltip="" target="some url" image="gl.png" command="URL_LINK"/>
    <item type="image" tooltip="" target="some url" image="help.png" command="URL_LINK"/>
</titlebar>

all of these should be displayed in a div and last 3 images should be displayed at the end of the div so it looks like right aligned

I have created a div

<div id="header" class="header"></div>

In loop I am using the following code

if(type == "image") {
                        var node = '<img src=\"'+imageURL+'\"/>';
                        var $myNewElement = $(node);
                        $myNewElement.appendTo('#header');
} else  if(type =="separator") {
                        var node = '<spacer type="horizontal" width="100%" height="20" align="left"/>';
                        var $myNewElement = $(node);
                        $myNewElement.appendTo('#header');
}

However the spacer is not working (Checked in Chrome/IE). I am looking for functionality like Flex Spacer.

Thanks for any help/ideas.