I am using innerHTML to print out some divs with some text boxes based on a selected option.

When the html prints out the divs do not hold their width despite me coding it in the css externally, internally OR inline. In firebug the width is shown to be set at 200px, yet visually you can clearly see that the width is not applying. Tested in both Firefox & Chrome...

Can anyone help me? Here is a JSFiddle:

/

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;
}

I am using innerHTML to print out some divs with some text boxes based on a selected option.

When the html prints out the divs do not hold their width despite me coding it in the css externally, internally OR inline. In firebug the width is shown to be set at 200px, yet visually you can clearly see that the width is not applying. Tested in both Firefox & Chrome...

Can anyone help me? Here is a JSFiddle:

http://jsfiddle/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;
}

• javascript
• css
• width
• innerhtml

• Use a table, it would make your life much easier – ama2 Commented Aug 15, 2013 at 0:02
• @ama2 thanks for the speedy reply but tables are incredibly poor to work with and I don't want to take the easy way out. Surely there is a way to resolve this. I try to avoid tables at all costs... – David Dawson Commented Aug 15, 2013 at 0:05

2 Answers 2

In the string creating the html it assigns a width as a percentage inline in the markup. Since this is an inline style it will take precedent over what is specified in the CSS. You need to remove the style="30%" from the HTML strings.

Then change the .cell to inline-block for the width to take effect.

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

EXAMPLE http://jsfiddle/HhJhK/1/

Refactored JS

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">First Name</div><div class="cell" >Last Name</div><div class="cell">Email</div></div>';

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

}

you need .cell class's display: inline-block;

cheers