css - HTML: flowed <pre> with absolute positioning -


i have centered column of text, has fixed width. however, want break fixed width <pre> (and other tags), fill full screen width, while keeping flow text.

so far, have following css:

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

so, in html fragment, paragraphs in centered column on page, correct.

<div class="bodice">   <p>some text.  more text.</p>   <pre>here's code!</pre>   <p>yet more text.  , more text.</p> </div>

however, text within <pre> not flowed overlaps, isn't quite effect want. does have correct position: aligned against left side of screen.

a more complete example, @ jsfiddle: http://jsfiddle.net/jashank/vbkdp/

how have <pre> flowing rest of paragraphs while aligning left?

so, after discussion think understood 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, , compiled them cmake build                 system; , good.  however, when attempt 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 coredump doesn't either; looks me stack                 smashed.             </p>              <p>                 time later, after aspell glitch , few patches fix                 neurotic breakage:             </p>              <pre> 11:11:07 &lt;nox&gt; wow 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, doesn't appear bitness issue, occurs                 in 32- , 64-bit modes.  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 jsfiddle can view solution in action.


Comments

Post a Comment

Popular posts from this blog

c++ - Is it possible to compile a VST on linux? -

for class project i'm attempting write vst plugin backed cuda. current cuda workflow on linux box, i'd prefer compile , link there. according wikipedia , should possible (i couldn't find steinberg documentation relevant linux) can't find makefile or instructions on how build if aren't using xcode or visual studio. i'm vst 3 sdk doesn't support linux. when try compile plugin under linux, error: ./base/source/fatomic.cpp:39:30: fatal error: libkern/osatomic.h: no such file or directory this issue caused following code in "vst3 sdk/base/source/fatomic.cpp" #if mac #include <libkern/osatomic.h> #if mac_os_x_version_min_required > mac_os_x_version_10_4 #define native_atomic_type (volatile int32_t*) #else #define native_atomic_type (int32_t*) #endif #elif windows #include <windows.h> #endif but hope compiling under linux work vst sdk 2.4. reading. jvstwrapper seems run on lin...
Read more

java - Output of Eclipse is rubbish -

i want write program in eclipse language different english. when display output using system.out program, displays output correctly in console editor. when accept input console , output it, output rubbish. how can solve it. many thnaks i'm not sure if problem, have character encoding problem. make sure you're using unicode, utf-8. you can read more @ official docs converting non-unicode text .
Read more

jquery - Confused with JSON data and normal data in Django ajax request -

i read json internet still have not got grasp of it. reading article http://webcloud.se/log/ajax-in-django-with-jquery/ i not understood first part function using json def xhr_test(request, format): if request.is_ajax(): if format == 'xml': mimetype = 'application/xml' if format == 'json': mimetype = 'application/javascript' data = serializers.serialize(format, examplemodel.objects.all()) return httpresponse(data,mimetype) # if want prevent non xhr calls else: return httpresponse(status=400) my main problems are from function getting format variable does format json mean data given function json or data recived json can give me simple example ouput of function data = serializers.serialize(format, examplemodel.objects.all()) how use data when response in jquery function if don't use json in above function how input , response chnage thanks ...
Read more