Strange Form Issue (Skewed layout)

[cluettr]

Having used the sample I get a strangely skewed form. Here is the code which is direct from the API source files...



<script>
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
var simple = new Ext.form.Form({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php' (http://extjs.com/forum/'save-form.php')
});
simple.add(
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'first',
width:175,
allowBlank:false
}),
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'last',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Company',
name: 'company',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Email',
name: 'email',
vtype:'email',
width:175
})
);
simple.addButton('Save');
simple.addButton('Cancel');
simple.render('form-ct');
});
</script>



<div style="width:300px;">
<div class="x-box-tl">
<div class="x-box-tr">
<div class="x-box-tc">
</div>
</div>
</div>

<div class="x-box-ml">
<div class="x-box-mr">
<div class="x-box-mc">
<h3 style="margin-bottom:5px;">Simple Form</h3>
<div id="form-ct">
</div>
</div>
</div>
</div>

<div class="x-box-bl">
<div class="x-box-br">
<div class="x-box-bc">
</div>
</div>
</div>

</div>