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 6 2257
Thomas Mlynarczyk <bl*************@hotmail.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? This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Ney André de Mello Zunino |
last post by:
Hello.
The issue is quite known: you have a block-level container holding a
set of floated elements and you need that the container's content
height take the floated elements' dimensions into...
|
by: Don G |
last post by:
Is it possible to lock the aspect ratio of container using CSS?
For example, have a <div> that is resized according to the size of the
browser window, but remains square, regardless of it's size....
|
by: ianv2 |
last post by:
Hi
I have a div which contains my local navigation bar, which has a blue
background and is next to the content div, at the moment however this
blue background colour stops after the unordered...
|
by: Miked |
last post by:
Hello:
I'm relatively new to CSS, and I'm doing a site where I don't want to
use any tables.
I've gotten pretty far, and the site has the layout I want. My only
problem is that I'm using the...
|
by: MrPutty |
last post by:
Hello everyone!
It seems I've finaly found a place with savy folks ;-) The following problem has me puzzeled - hopefully someone can help me out!
...
|
by: Dave Siegel |
last post by:
Hi,
I've made a container div and put 2 div's inside of that for easy positioning..
The problem is that the container div has a standard 10px or so top margin which makes it go down too much.....
|
by: studentofknowledge |
last post by:
hi guys .. I was wondering if someone could offer some guidance with regards to a web page positioning?
I would like to position my web page or main div container to appear in the middle of a...
|
by: anish007 |
last post by:
I have a problem with making div container height grow with respect to the other.
I have basically 3 div containers, the div container named main contains the other 2 containers left and right...
|
by: Jim Carlock |
last post by:
I ran into a problem a think. Either that or I overlooked something.
I seem to run into this problem quite often. I fail to pinpoint the
problem and it appears as a bug with mozilla browsers....
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |