[Solved] Button :: Horizontally Aligned?

[cluettr]

I've added a few buttons to a page. The buttons are layed out one on top of the other rather than each one beside the other. They are vertically stacked. What is it that I'm missing?



<div style="position:absolute; top:70px; left:7px; z-index:2; overflow: none;">
<span id="button1"></span>
<span id="button2"></span>
<span id="button3"></span>
<span id="button4"></span>
<span id="button5"></span>
<span id="button6"></span>
<span id="button7"></span>
<span id="button8"></span>
<span id="button9"></span>
</div>


<script>
btn_pending = new Ext.Button('button1', {id:'pending', text:'Pending'});
btn_received = new Ext.Button('button2', {id:'received', text:'Received'});
btn_efa = new Ext.Button('button3', {id:'efa', text:'Inhouse EFA'});
btn_returned = new Ext.Button('button4', {id:'returned', text:'Returned'});
btn_import = new Ext.Button('button5', {id:'import', text:'Import'});
btn_add = new Ext.Button('button6', {id:'add', text:'Add'});
btn_documentation = new Ext.Button('button7', {id:'documentation', text:'Documentation'});
btn_about = new Ext.Button('button8', {id:'about', text:'About'});
btn_forward = new Ext.Button('button9', {id:'forward', text:'More >>>'});
</script>

[brian.moeskau]

Anytime you have a layout issue like this, first inspect in Firebug to see what the generated source looks like. In this case, each button is rendered as a table (which is a block level element), so you are seeing the default rendering that would be the same as if you included a bunch of standard html tables one after the other.

An easy fix is to float the buttons. Every button gets the class "x-btn" applied, so you could do this somewhere in your own css:


.x-btn {float:left;}

Another option would be to render each button into a container that you can use to control the overall width (like TDs inside a containing table). There are many ways to solve it, depending on your needs.

[cluettr]

Thank you Brian for that clear and accurate explanation : ) - Rob