I currently have a centered column of text with a fixed width. However, I am looking to break that fixed width for certain tags like <pre> so that they can fill the full screen width while maintaining flow with the rest of the text.
My CSS snippet so far looks like this:
pre {
float: left;
left: 0;
padding: 1em;
position: absolute;
}
In this HTML fragment, the paragraphs are correctly displayed in a centered column on the page.
<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 content inside the <pre> tag does not flow properly and overlaps, which is not the intended effect. It does appear aligned against the left side of the screen as desired.
You can view a more complete example on jsFiddle at: http://jsfiddle.net/Jashank/VbKDP/
How can I make the content within the <pre> tag flow seamlessly with the rest of the paragraphs while keeping it aligned to the left?