Could someone please help me with centering my buttons within the red area regardless of their width?
If you would like to view the Demo, click here: http://jsfiddle.net/v3X2k/
Below is the code I am currently using:
<div style="width:660px;height:40px;display;block;background:red">
<div id="wrapper3" style="margin:0 auto;width:160px">
<button>Test</button>
<button>Test 2</button>
</div>
</div>
<hr />
<div style="width:660px;height:40px;display;block;background:red">
<div id="wrapper3" style="margin:0 auto;width:160px">
<button>Test Test Test Test Test Test</button>
<button>Test 2</button>
</div>
</div>
In the second example, the second button drops below instead of staying inline with the first one. My goal is to keep them in line just like in the first example.
I am willing to remove the width:160px statement if needed, but I really need these buttons centered.
Any suggestions on how to achieve this?
Thank you in advance :)