Aligning preformatted text

I can’t figure hot to properly align the <pre> text and <h2>'s below side by side from left to right. I also need padding in between. can anyone help?


			<pre>
			   <h2>Header1</h2>
			   some text here
			   some text here
			   some text here
			   some text here
			   some text here
			</pre>

			<pre>
			   <h2>Header2</h2>
			   some text here
			   some text here
			   some text here
			   some text here
			   some text here
			   some text here
			</pre>

			<pre>
                           <h2>HEADER3</h2>
			   some text here
			   some text here
			   some text here
			   some text here
			   some text here
			</pre>

One way to do it:


pre {float: left;
	 width:250px;
}

pre h2 {margin-left:240px;
}


<pre>
			   <h2>Header1</h2>
			   some text here
			   some text here
			   some text here
			   some text here
			   some text here</p> 
			</pre>

			<pre>
			   <h2>Header2</h2>
			   some text here
			   some text here
			   some text here
			   some text here
			   some text here
			   some text here 
			</pre>

			<pre>
                           <h2>HEADER3</h2>
			   some text here
			   some text here
			   some text here
			   some text here
			   some text here 
			</pre>

Only tested locally in Opera

seems every time I add an <h2> tag, the three <pre> section are aligned one on top of the other, but when the <h2> tags are removed, they are aligned side by side. Any ideas?

<pre> are inline elements and it’s invalid to have an <h2> inside a <pre>. The <h2> is a block and as so it will cause <pre>'s to start on different lines.
Or if you are using LUkis CSS, it’s because they are floated and floating does that, adding clear:left; should fix that

Yup, they’re inline indeed but i didn’t want to mess his code completely up lol.
Anyways, probably you’re gonna run into some more trouble because the <pre> tag is hard to style. My advice anyway: tahe the h2 out of the construction so that you get valid code :smiley:

Here’s a nice article on how to style them and some pitfalls and how to avoid them.

No, <pre> elements are block-level, but they can only contain certain inline elements (not all of them).

And since <h2> is also block-level, it’s invalid to nest one inside a <pre>. So your conclusion is right, but for the wrong reasons. :slight_smile:

Just looked it up: indeed it’s block-level. It’s the <code> that’s inline. I always mix those 2 lol

The pre element is a block element.

<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

<!ENTITY % preformatted "PRE">

It may only contain inline elements excluding certain elements.

<!ENTITY % pre.exclusion "IMG|OBJECT|BIG|SMALL|SUB|SUP">

<!ELEMENT PRE - - (%inline;)* -(%pre.exclusion;) -- preformatted text -->

cheers,

gary

You looked it up?
You looked it up?!

I guess you don’t trust me, huh?
I’m so hurt!

:stuck_out_tongue:

Indeed. indeed! lol

I don’t trust myself when it comes to Css, so…:smiley:

But please, don’t cry. I’ll take your feelings into account next time lololol

I have no clue what happened between the time I decided to comment on the pre element, and actually posting what had become completely redundant.

Sorry for the wasted bandwidth.

cheers,

gary

For some reason it never struck me as a “block” element type of material…thanks for that :). In the end I was right though lol