Wrapping a box around its content

[Edward A. Falk]

Hi all; I'm trying to do something that I thought would be very simple. I want
to wrap a border around a block of text.

Style sheet:

.example {
margin-left: 2em;
padding: 5px 1em;
border: 1px solid black;
}

Html:

<p>By now your code should look like this:</p>

<pre class=example>
yada yada yada
yada yada yada
</pre>

This gives me a box around my <pre> block, but the box extends all the
way to the right edge of the browser window. How can I make it small
enough to just enclose the text?

 

[rf]

Hi all; I'm trying to do something that I thought would be very
simple. I want to wrap a border around a block of text.

Style sheet:

.example {
margin-left: 2em;
padding: 5px 1em;
border: 1px solid black;
}

Html:

<p>By now your code should look like this:</p>

<pre class=example>
yada yada yada
yada yada yada
</pre>

This gives me a box around my <pre> block, but the box extends all the
way to the right edge of the browser window. How can I make it small
enough to just enclose the text?

float: left;

 

[Andy]

Hi all; I'm trying to do something that I thought would be very simple. I
want
to wrap a border around a block of text.

Style sheet:

.example {
margin-left: 2em;
padding: 5px 1em;
border: 1px solid black;
}

Html:

<p>By now your code should look like this:</p>

<pre class=example>
yada yada yada
yada yada yada
</pre>

This gives me a box around my <pre> block, but the box extends all the
way to the right edge of the browser window. How can I make it small
enough to just enclose the text?

Hi,

Try using <span> instead of <pre>.


Andy

 

[rf]

Hi,

Try using <span> instead of <pre>.

Which would negate the prime purposes of <pre>, in this case presenting
lines of code with line breaks intact.

yada yada yada yada yada yada

using a proportional font is a whole lot different to

yada yada yada
yada yada yada

using a monospaced font.

 

[dorayme]

Try using <span> instead of <pre>.

And have it invalid? Better to do what rf suggested.

But truth is, no one really knows what OP is up to and why he
wants a pre. OPs are like this, it is in their nature to be
secretive. I do not say this to be in any way critical. Try being
an OP, it truly is a frightening prospect! Compared with sitting
here in the dark audience, peeling the bananas, sucking the last
drops of juice out of the paper/plastic (what are we going to do
with the empty?), watching the stage as nervous individuals brave
the lights...

 

[rf]

And have it invalid? Better to do what rf suggested.

But truth is, no one really knows what OP is up to and why he
wants a pre.

I suspect the OP is trying to present some code. Must be in some weird
language though. yada is a syntax error in all of the hundred or so
languages I know.

Ah, I know, the code must be kept secret.

OPs are like this, it is in their nature to be
secretive. I do not say this to be in any way critical. Try being
an OP, it truly is a frightening prospect! Compared with sitting
here in the dark audience, peeling the bananas, sucking the last
drops of juice out of the paper/plastic (what are we going to do
with the empty?),

Throw it at the OP of course! Along with the banana peel.

watching the stage as nervous individuals brave
the lights...

 

[Andy Dingley]

Hi all; I'm trying to do something that I thought would be very simple. I want
to wrap a border around a block of text.

Use <div> Apply CSS to the <div>

You've presumably done this, and didn't like the results. So your
question is no longer simply "wrap a border" but rather, "having
wrapped a border, how do I control the size of the box?"

This gives me a box around my <pre> block, but the box extends all the
way to the right edge of the browser window. How can I make it small
enough to just enclose the text?

It's not easy to do this. Very easy to set the width to something
fixed (which if you set it to a number of ems, will work pretty well,
so long as you know the text beforehand), harder to set it to be fluid
around varying text.

The way it should work is obvious (auto right margin), but poorly
supported by browsers. Float can help, but again that has borwser
support problems - IE doesn't like it unless you also set width, so
why bother? <pre> rather than <div> is entering a whole new can of
worms.

So if you want <pre> behaviour (i.e. whitespace and linebreaks should
be preserved) then use that, otherwise don't

If you want float, use float, otherwise don't. This is quite possibly
a good choice though

If you just want to control the width without floating or pre-like
behaviour, stay simple and use <div>. But you'll likely need to set
the width explicitly anyway.

 

[Edward A. Falk]

I suspect the OP is trying to present some code. Must be in some weird
language though. yada is a syntax error in all of the hundred or so
languages I know.

LOL . Didn't think I was being cryptic. Here's the exact code if you
want to see it.

style.css:

.box {
margin: 20px 5em;
padding: 5px 1em;
border: 1px solid black;
}

html:

<p>The display might now look like:</p>

<pre class="box">T: 123.00
Z: 456.00
Y: 789.00
<big><b>789.00</b></big>
</pre>

See http://www.efalk.org/RpnCalcPro/#rpn if you want to see it in context.

I'll try previous poster's suggestion of using <span>.

 

[Edward A. Falk]

It's not easy to do this. ...

I was hoping there would be some easy-to-use CSS construct that I
had missed.

Thanks for your help; I'll give float a try.

 

[Gus Richter]

LOL . Didn't think I was being cryptic. Here's the exact code if you
want to see it.

style.css:

.box {
margin: 20px 5em;
padding: 5px 1em;
border: 1px solid black;
}

html:

<p>The display might now look like:</p>

<pre class="box">T: 123.00
Z: 456.00
Y: 789.00
<big><b>789.00</b></big>
</pre>

See http://www.efalk.org/RpnCalcPro/#rpn if you want to see it in context.

..box {
margin: 20px 5em;
padding: 5px 1em;
border: 1px solid black;
float: left;
}
p {clear:left;}

The float:left; to have the border limited to the text and not to the
right of the viewport.
The p{clear:left;} to clear the paragraph from the right of the float.

 

[Eustace]

I was hoping there would be some easy-to-use CSS construct that I
had missed.

Thanks for your help; I'll give float a try.

Have you tried to use a 1 cell table? For example

table td {
margin-left: 2em;
padding: 5px 1em;
border: 1px solid black;
}

<table>
<tr>
<td>
<pre>
The car in the ditch - the man on a tree,
The moon was full - and so was he.
</pre>
</td>
</tr>
</table>

emf

 

[Beauregard T. Shagnasty]

Have you tried to use a 1 cell table? For example

That is an awful lot of useless markup to replace the simple
"float: left;" as was already described. I wouldn't recommend using a
table at all.

 

[Andy Dingley]

That is an awful lot of useless markup to replace the simple
"float: left;" as was already described. I wouldn't recommend using a
table at all.

I might do. It gives the effect needed (including auto-sizing the
width) and it works under IE. Although it's annoyingly simple to write
correct CSS for just what the OP needs, IE is still a damn nuisance in
not working correctly with it.

 

[dorayme]

<[email protected]
m>,

I might do. It gives the effect needed (including auto-sizing the
width) and it works under IE. Although it's annoyingly simple to write
correct CSS for just what the OP needs, IE is still a damn nuisance in
not working correctly with it.

What exactly does not work on IE? Using float with OPs pre works
fine even on IE6.

 

[Andy Dingley]

What exactly does not work on IE? Using float with OPs pre works
fine even on IE6.

IE needs width set before it will float things. The need to set width
explicitly is what we're trying to avoid.

Mind you, what happens if we don't set width? We don't actually need
floating here - is IE's partial behaviour as much as we need.

 

[dorayme]

<[email protected]
m>,

IE needs width set before it will float things. The need to set width
explicitly is what we're trying to avoid.

Mind you, what happens if we don't set width? We don't actually need
floating here - is IE's partial behaviour as much as we need.

Last time I looked, IE 6 and 7 showed it fine without setting a
width. I looked at browsershots I think, I have not set up my
winbox in my new location yet... try:

<http://dorayme.netweaver.com.au/falk.html>

 

[rf]

IE needs width set before it will float things.

What?

I don't think so.