Order selected images side by side - EXTJS

Question

I have to select one or more images on button click, which have to display side by side. The problem is, that the images only order among themselves.

When I click on the button, i get selectInstuctionIcon. When I select one or more images, i need to display them in fieldset side by side.

This is the basic code:

{
                        xtype: 'fieldset',
                        layout: 'form',
                        title: dict.hazardAssessment.hazardIcon,
                        width: 400,
                        height: 400,
                        items: [{
                            xtype: 'button',
                            iconCls: 'iconAdd',
                            scale: 'small',
                            text: dict.hazardAssessment.selectHazardIcon,
                            handler: function () {
                                MyDesktop.getModule('selectInstructionIcon').createWindow('hazardIconId' + formId);
                            }
                        }, {
                            id: 'hazardIconId' + formId,
                            hidden: true,
                            xtype: 'textfield',
                            name: 'hazardIconId',
                            fieldLabel: 'icon1',
                            listeners: {
                                'valid': function () {
                                    var iconId = this.getValue();

                                    if (iconId > 0) {
                                        Ext.Ajax.request({
                                            url: config.httpbase + '/hazardIcons/' + iconId,
                                            success: function (data) {
                                                var response = Ext.decode(data.responseText);
                                                var iconHtml = Ext.getCmp('hazardIconPanel' + formId).el.dom.innerHTML;

                                                iconHtml += getIconDiv(response.id, response.type + '/' + response.filename);

                                                console.log(iconHtml);

                                                Ext.getCmp('hazardIconPanel' + formId).update(iconHtml);
                                            }
                                        });
                                    } else {
                                        iconHtml = getIconDiv(0, 'no_icon.png');
                                        Ext.getCmp('hazardIconPanel' + formId).update(iconHtml);
                                    }
                                }
                            }
                        }, {
                            id: 'hazardIconPanel' + formId,
                            xtype: 'panel',
                            border: true,
                            // region: 'center',
                            width: 350,
                            layout: 'fit',
                            autoScroll: true,
                            bodyStyle: 'padding: 5px;',
                            html: getIconDiv(0, 'no_icon.png'),
                        }]
                    }]

And this is my getIconDiv function:

var getIconDiv = function(iconId, filename) {
             var html = '<div id="hazardIcon_' + iconId + '" style="text-align:left;width:100%;float:left;">';
             html += '<img width="128px" src="'+ config.httpbase + '/uploads/hazardIcons/' + filename +'"/></div>';

             return html;
        };

I get images, but they are orderd like this:

This is what i get

And this is the console log. I know that the divs ain't right in each other, but i don't know how i solve his. console Log