aligning ext.net buttons in single row

[hadoop]

I have replaced the asp buttons with ext.net buttons. After replacing, the ext.net buttons comes on different rows.

My initial code ::

 <div class="form-group">
            <asp:Button ID="btnSubmit" Text="SUBMIT" runat="server" OnClick="btnSubmit_Click" />        
            <asp:Button ID="btnReset" Text="RESET" runat="server" />
    </div>

both the buttons align on same row.

But when I replaced them with ext:Button, they appear on two rows.

<div class="form-group">
            <ext:Button ID="btnSubmit" runat="server" Text="SUBMIT"></ext:Button>            
            <ext:Button ID="btnReset" runat="server" Text="RESET"></ext:Button>        
    </div>

Firebug is showing one extra div for ext.net button btnSubmit

App.ContentPlaceHolderID_btnSubmit_Container

. And this div is covering whole row. Similarly div

App.ContentPlaceHolderID_btnReset_Container

is for btnReset. How to align both the buttons in a single row?

[fabricio.murta]

Hello!

Use a layout container for your buttons so you can nicely position them as you need. A viewport to the page is also advisable.

- viewport: makes your page fit the browser window size
- layout container: you have several layouts you can give to containers, explore them and understand how they work, and you can make auto-fit, line in one line, nest layouts and much more! Start on this example (which dispositions elements side by side) and move to the neighboring examples to discover the alternatives to them!

I hope this helps!