Why is this <p> expanding the whole page?

Question

If you visit this page and shrink your browser window, you will see my problem. [If you want to open the page in a new window, just hold down shift when you click the link.]

The answers to the question extend beyond the page margin instead of wrapping.

I have spent the last half hour working with Chrome's Inspector and Firefox's DOM inspector - all to no avail. I just cannot figure out why it's doing this.

Update: Here is a screenshot of http://stackmobile.com/view_question.php?site=stackoverflow&amp;id=3058417

Answer 1

You're looking in the wrong place. It's not the paragraph tag, I'm almost certain it's the <pre> block in DJTripleThreat's answer. Notice that the behavior starts as soon as you resize the window below the width of that pre block.

This is quite normal. By design, text in a pre-formatted block does not get reflowed, and it will stop its parent container from being properly resized below its width.

Answer 2

The <pre><code> is what's doing it.

If you modified it like this:

<pre style="overflow:auto;max-width: 90%;">

Then a scrollbar will appear if it will go outside the lines. Adjust the max-width property to get the effect you like.

Or you could do this in your css:

pre {
  overflow: auto;
  max-width: 90%;
}

More information about the <pre> tag.

---

EDIT. Wow, your screenshot is ~ 400 pixels wide. 90% not working at that width. Hardcoding a width does the trick:

<pre style="overflow:auto;max-width: 400px;">

Or

pre {
  overflow: auto;
  max-width: 400px;
}

Answer 3

Simple example of relative css width. You set the width of the table to 100%, but did not set a property for the <p> other tags.

A simple solution could be(a change in style.css:76):

.answer_content {
  width: 80%;
}

Tested to work on Chrome 6.