Stop <p> tags from wrapping onto a new line

Question

I have some content in a <p>tag. For some reason in IE<8 (Possibly greater than 8 too) the content of the last <p>tag on a line wraps around.

Is there anyway to stop this from happening ?

Example link

N.B The actual form will use post rather than get, I've just changed it so I could link to the results.

My HTML

<div class="box">
    <p>
        <span class="letter taller"></span>
        <span class="letter"></span>
        <span class="letter taller"></span>
        <span class="letter hanging"></span>
    </p>
</div>

My CSS

.letter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    padding-top 1.618em;
    border-width: 1px;
    border-style: solid;
    width: 2em;
    height: 2em;
}
.box {
    float: left;
    padding-left: 1.618em;
    padding-top: 5em;
}
.taller, .hanging {
    height: 4em;
}
.hanging {
    position: relative;
    top: 2em;
}

Answer 1

You can add white-space: nowrap to the p tag css and it will stop the wrapping.

you can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space