# Providing spaces between elements - spacer not working

**URL:** <https://forum.kirupa.com/t/providing-spaces-between-elements-spacer-not-working/326554>\
**Category:** web dev\
**Created:** [December 23, 2011, 6:34am UTC](https://forum.kirupa.com/t/providing-spaces-between-elements-spacer-not-working/326554 "2011-12-23T06:34:20Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![nitinmukesh](https://avatars.discourse-cdn.com/v4/letter/n/7feea3/32.png) [@nitinmukesh](https://forum.kirupa.com/u/nitinmukesh)\
**Post date:** [December 23, 2011, 6:34am UTC](https://forum.kirupa.com/t/providing-spaces-between-elements-spacer-not-working/326554/1 "2011-12-23T06:34:20Z")

</div>

Hi,

I have to create a small layout in the following order (sample\_layout.JPG)

This is the xml I am loading using JQuery

```php
<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

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

```

In loop I am using the following code

```php
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.