CODEWITHSUNDEEP
htmlcss
Luke
Luke

Reputation: 3541

Stop <p> tags from wrapping onto a new line

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

Upvotes: 4

Views: 12766

Answers (2)

rlemon
rlemon

Reputation: 17666

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

Upvotes: 11

Doge
Doge

Reputation: 345

If I am interpeting the question correctly, you can use &nbsp;. I would suggest overflow-x, except IE8 doesn't understand it.

Upvotes: -1

Related Questions