How do I make buttons "float"?

[Cesium]

Hi, I want to be able to set buttons to a specific width and then have them 'float', like you can make html objects do with the css 'float' property. Basically, I want to be able to generate an arbitrarily long list of buttons, and have them all fit themselves into a certain area of the screen. I tried to make the button float with the 'style' config option, but I'm not even sure this did anything at all. What's the best way to 'float' buttons?

[mitchellsimoens]

What widget are the buttons children of and if you are specifying a layout what is it?

[Cesium]

The buttons are in 'cards' of the card layout with no layout specified for each card. I don't have the code with me right now but I'm pretty sure it's organized like this:

var panel =Ext.create('Ext.Panel',{    
    layout:'card',    
    items:[
        {
             html:"First Item",
             items: [
                 {
                      xtype: "button",
                      text : "derp"
                 },
                 {
                      xtype: "button",
                      text : "derp2"
                 }
             ]
         }
    ]
});

[mitchellsimoens]

Ok, you can still use the CSS float on the buttons since you are using the default layout. I would give the buttons a cls config value and use that to mess with the button.

[Cesium]

Okay, can you give me a verbatim example of the proper code I would use here? Because I thought I was applying CSS float property, but nothing appears to be happening:

            var panel = Ext.create('Ext.Container', {
                fullscreen: true,
                layout: 'card',
                items: [ // begin Container items
                    { // begin main screen
                        xtype : 'panel',
                        html  : 'procfam info',
                        scrollable: {
                            direction: 'vertical'
                            },
                        items: [
                            {
                                xtype: 'button',
                                text : 'test',
                                width: '100px',
                                style: {
                                    float:'right'
                                    }
                                },
                            {
                                xtype: 'button',
                                text : 'test',
                                width: '100px',
                                style: {
                                    float: 'left'
                                    }
                                },
                            {
                                xtype: 'button',
                                text : 'test',
                                width: '100px',
                                style: {
                                    float: 'left'
                                    }
                                }
 // leaving off all the terminating delimiters, you get the point

Thanks.

[Fayt]

add this to your code

 layout: 'hbox',

[Cesium]

@fayt: this doesn't appear to help. Now the buttons take up all available vertical space unless I explicitly specify a height, and they still don't wrap around when they take up more room than a single row can provide. I see no evidence that the float property is doing anything at all.

            var panel = Ext.create('Ext.Container', {
                fullscreen: true,
                layout: 'card',
                items: [ // begin Container items
                    { // begin main screen
                        xtype : 'panel',
                        layout: 'hbox',
                        scrollable: {
                            direction: 'vertical'
                            },
                        items: [
                            {
                                xtype: 'button',
                                text : 'test',
                                height: '25px',
                                style: {
                                    float: 'left'
                                    }
                                },
                            {
                                xtype: 'button',
                                text : 'test',
                                height: '25px',
                                style: {
                                    float: 'left'
                                    }
                               },
                            {
                                xtype: 'button',
                                text : 'test',
                                height: '25px',
                                style: {
                                    float: 'left'
                                    }
                                }
 // leaving off all the terminating delimiters, you get the point