Container shrinking below content width

Hi!

I have noticed something strange: I have an element styled to have padding,
a border and some margin. The element contains preformatted text. When the
browser window is made narrow enough, a horizontal scrollbar appears as the
preformatted text becomes too wide and is not wrapped. So far so good. But
why is the element itself shrunk to fit in the window (still having its full
margin, padding and border visible) as if it's content was not too wide?
Instead of staying "around" the preformatted text (i.e. fully enclosing it),
the latter seems to "overflow" the element's boundaries. This also seems to
happen with other content (like an image). Is this standard behaviour? Or
should I look for what I must have done wrong?

Illustration:

* = window edge

+---+
! ! = element border
+---+

##::: = scrollbar

Window wide enough:

* +----------+ *
* ! ! *
* ! ABCDEFGH ! *
* ! ! *
* +----------+ *

Window not wide enough:

- That's what I expect:

* +------*----+
* ! * !
* ! ABCDE*FGH !
* ! * !
* +------*----+
######::::

- But that's what happens:

* +----+ *
* ! ! *
* ! ABCDE*FGH
* ! ! *
* +----+ *
######::::


Confused,
Thomas

Thomas Mlynarczyk <blue_elephant55 (AT) hotmail (DOT) com> wrote:

Hi!

I have noticed something strange:

A URL would have saved you a lot of creative artwork!

Look up the CSS property overflow.

Also sprach Neal:

Look up the CSS property overflow.

The only value that could possibly change something here would be "visible",
but that's the default anyway. Besides, the problem is not what happens to
the content, but what happens to the area the containing element is supposed
to fill with its background and padding.

Thomas Mlynarczyk wrote:

Hi!

I have noticed something strange: I have an element styled to have
padding, a border and some margin. The element contains preformatted
text. When the browser window is made narrow enough, a horizontal
scrollbar appears as the preformatted text becomes too wide and is
not wrapped. So far so good. But why is the element itself shrunk to
fit in the window (still having its full margin, padding and border
visible) as if it's content was not too wide? Instead of staying
"around" the preformatted text (i.e. fully enclosing it), the latter
seems to "overflow" the element's boundaries. This also seems to
happen with other content (like an image). Is this standard
behaviour? Or should I look for what I must have done wrong?

I encountered the same phenomenon, but only in Gecko browsers, not in IE. It
made me guess that Gecko sets the priority on the calculated element width,
allowing the content to break out of the element, while IE sets the priority
on wrapping the element arount the content.

You might find some workaround working with min-width or max-width; but note
that it is not supported by IE.

--
Markus

Also sprach Markus Ernst:

I encountered the same phenomenon, but only in Gecko browsers, not in
IE. It made me guess that Gecko sets the priority on the calculated
element width, allowing the content to break out of the element,
while IE sets the priority on wrapping the element arount the content.

Indeed, the problem does not occur in IE.

You might find some workaround working with min-width or max-width;

My element has no explicit width set as I want it to take up all the
available horizontal space and still give it padding, border and margin.
Maybe an inner element set to width: 100% would do the job? I must try that.

but note that it is not supported by IE.

Wouldn't matter in that case.

Thomas Mlynarczyk wrote:

Also sprach Markus Ernst:

I encountered the same phenomenon, but only in Gecko browsers, not in
IE. It made me guess that Gecko sets the priority on the calculated
element width, allowing the content to break out of the element,
while IE sets the priority on wrapping the element arount the
content.

Indeed, the problem does not occur in IE.

You might find some workaround working with min-width or max-width;

My element has no explicit width set as I want it to take up all the
available horizontal space and still give it padding, border and
margin. Maybe an inner element set to width: 100% would do the job? I
must try that.

but note that it is not supported by IE.

Wouldn't matter in that case.

Just an idea that came to my mind, maybe it's crap, but you could try
something like that:

<div id="container">
<div id="innerelement">
<pre>Your text goes here</pre>
</div>
</div>
<script type="text/javascript">
var c = document.getElementById("container");
var i = document.getElementById("innerelement");
if (c.width < i.width) c.width = i.width;
</script>

--
Markus

Also sprach Markus Ernst:

Just an idea that came to my mind, maybe it's crap, but you could try
something like that:

div id="container"
div id="innerelement"
pre>Your text goes here</pre
/div
/div
script type="text/javascript"
var c = document.getElementById("container");
var i = document.getElementById("innerelement");
if (c.width < i.width) c.width = i.width;
/script

I guess I'd prefer the content leaking out...
I tried to use an inner element with width: 100%, but it didn't seem to
change anything, nor could I achieve anything using min-width or max-width.
Any idea what the specs say about that?