Why does text overlap in this example [Archive]

View Full Version : Why does text overlap in this example

wkenny

12-16-2010, 04:53 PM

The following example is from w3schools:

<html>
<head>
<style type="text/css">
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:50px;
}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br />
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">The height and width of this paragraph is 100px.</p>
<p>This is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph.</p>
</body>
</html>

If I change the width of selector p.ex to 50, then the sentence overlaps the paragraph that follows. Why does this happen?

traq

12-16-2010, 05:09 PM

this has to do with the "overflow" property, which is (by default) "auto." What that means depends on the browser, though "scrollbars if necessary" is recommended.

Apparently, however, in both Fx and Chrome (haven't tested in any others), the default value for paragraphs is "visible." Try it; overflow: visible will produce the same result (while overflow: auto will produce scrollbars). The second paragraph is overlapping the first because it is positioned at the bottom of the first (50px tall) paragraph (so it's actually the first paragraph that is "under-lapping" the second).

If you want to control this, you need to:
a) choose an overflow value that will prevent it, such as overflow: hidden or overflow-x: visible
b) not apply a set height to your paragraph (that's kind of an odd example anyway; it makes more sense to apply the height to a <div> that contains the paragraph).

wkenny

12-16-2010, 07:50 PM

Thanks for the excellent explanation. I should point out that the code sample above shows my width of 50px. The original code had width of 100px.