Question

I have a centered column of text, which has a fixed width. However, I want to break that fixed width for <pre> (and some other tags), where they fill the full screen width, while keeping flow with the text.

So far, I have the following CSS:

pre {
  float: left;
  left: 0;
  padding: 1em;
  position: absolute;
}

So, in this HTML fragment, the paragraphs are in a centered column on the page, which is correct.

<div class="bodice">
  <p>Some text.  Some more text.</p>
  <pre>Here's some code!</pre>
  <p>Yet more text.  And some more text.</p>
</div>

However, the text within the <pre> is not flowed overlaps, which isn’t quite the effect I want. It does have the correct position: aligned against the left side of the screen.

A more complete example, at jsFiddle: http://jsfiddle.net/Jashank/VbKDP/

How do I have the <pre> flowing with rest of the paragraphs while aligning it to the left?

Answer 1

So, after some discussion I finally think I understood what you were looking for.

html

    <div class="header">
        <h1>[jashank] / diary</h1>

        <p><small>
            <!-- &#187;&nbsp;<a href="#xkcd">xkcd</a>&nbsp;&nbsp; -->

            </small></p>
    </div>

    <div class="bodice">
        <div id="post">
            <p>I've pulled LyX's SVN sources, and compiled them with the CMake build
                system; all well and good.  However, when I attempt to start LyX:</p>

            <pre>
<strong>jashank@jashank</strong> <span style="color: #0000ee;">(pts/33)</span> <span style="color: #cd0000;">~/Software/LyX-build</span> <span style="color: #0000ee;">[0 jobs]</span> <u>!3027</u>
2011-07-03 10:49:15 &gt;&gt;&gt;&gt;&gt; bin/lyx2.1
zsh: segmentation fault (core dumped)  bin/lyx2.1
            </pre>

            <div style="clear: both;"></div>

            <p>
                Tracing the coredump doesn't help either; looks to me like the stack
                was smashed.
            </p>

            <p>
                Some time later, after an aspell glitch and a few patches to fix
                neurotic breakage:
            </p>

            <pre>
11:11:07 &lt;nox&gt; wow it built! :)
11:11:28 &lt;jashank&gt; nox: Try running bin/lyx2.1
11:12:02 &lt;nox&gt; segfaults in ucs4le_mbtowc
            </pre>

            <p>
                In other words, it doesn't appear to be a bitness issue, as it occurs
                in 32- and 64-bit modes.  That doesn't bode well.
            </p>

        </div>

    </div>

css

body {
    font-family: sans-serif;
    margin: 0;
    text-align: center;
}

div.header {
    text-align: center;
}

div.bodice {
    margin: 0;
    text-align: center;
    width: 100%;
}

.bodice p {
    margin: 0 auto;
    text-align: justify;
    width: 50ex;
    overflow: auto;
}

div#post pre {
    text-align: left;
    width: 100%;
    padding: 1em;
}

body {
    text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
}

example

There’s a jsfiddle where you can view this solution in action.