javascript - innerHTML は幅を保持しません - Javascript/CSS

Question

選択したオプションに基づいて、いくつかのテキスト ボックスを含む div を印刷するために innerHTML を使用しています。

HTMLが出力されると、CSSで外部的に、内部的に、またはインラインでコーディングしているにもかかわらず、divの幅が保持されません。firebug では、幅が 200px に設定されていることが示されていますが、視覚的には幅が適用されていないことがはっきりとわかります。Firefox と Chrome の両方でテスト済み...

誰でも私を助けることができますか？JSFiddle は次のとおりです。

http://jsfiddle.net/HhJhK/

Javascript:

window.getTickets = function () {

    $amountId = document.getElementById('event_tt').value;

    $x = document.getElementById($amountId).value;

    var div = document.getElementById('booking_area');

    div.innerHTML = '<div style="width:750px;clear:both;"><div class="cell" style="width:30%;">First Name</div><div class="cell" style="width:30%;">Last Name</div><div class="cell" style="width:30%;">Email</div></div>';

    for (var i = 1; i <= $x; i++) {
        div.innerHTML = div.innerHTML + '<div style="width:750px;clear:both;"><div class="cell" style="width:30%;"><input type="text" name="par_fname" id="par_fname"></div><div class="cell" style="width:30%;"><input type="text" name="par_lname" id="par_lname"></div><div class="cell" style="width:30%;"><input type="text" name="par_email" id="par_email"></div></div>';
    }
}

CSS:

.cell {
    width:200px;
    display: inline;
    overflow:hidden;
}