By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,719 Members | 1,170 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,719 IT Pros & Developers. It's quick & easy.

<p> tag within a <div> does not respect CSS width, or any width for that matter.

P: n/a
Hi there,

Please check out : http://clarifysolutions.co.uk/certenroll/

The source is included below. This page is a test, so I can play about
with paddings, margins and layouts using divs as semantically
meaningless containers for bunch's of other elements - like everyone
keeps telling me to make my code standards compliant.

This request is not because I want a fix, but because I want to
UNDERSTAND why this is happening.

If you check the link you'll see that the content of that <Ptag just
keeps going and going and going along the line, however, as soon as I
put a space in there, the line breaks. But surely the <ptag should
adhere to the width of it's containing <div>? Can you help me
understand why this is happening.

As you can see I tried resorting to giving the paragraph a set width,
which the background-colour adheres to!!! so why not the text?

I am a beginner with this stuff and I am pulling my hair out as to why
this will not work. And it will not work in all browsers! in IE6 it
just looks broken completely.

IE7 and firefox its alright apart from the paragraph thing.

Can anyone help and MAKE ME UNDERSTAND!

Many many thanks if you can help

Gregory
Here is the source:

BEGIN CODE
************************************************** ************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" title="somecss">

*
{
margin:0px;
padding:0px;
}

body
{
background-color:#000000;
margin:0px;
padding:5px;
}

#mainpageset
{
width:545px;
height:547px;
padding:2px;
background-image:url(abackground.gif);
}

#navbarmain
{
width:375px;
height:30px;
}

#navbarmain a
{
color:#FFFFFF;
}
..buttonbarmain
{
width:75px;
height:30px;
padding-top:5px;
float:left;
background-image:url(button.rest1.gif);
background-repeat:no-repeat;
text-align:center;
font-family:Geneva, Arial, Helvetica, sans-serif
}

..buttonbarmain:hover
{
background-image:url(button.active1.gif);
}

#adbarright
{
float:right;
text-align:center;
color:#000066;
border: solid #00CC66 1px;
width:160px;
height:545px;
margin-left:2px;
padding:0px 2px 0px 2px;
overflow:hidden;
}

..adbarimage
{
width:160px;
height:auto;
}

#mainpagecont
{
border:solid 1px #00CC66;
width:375px;
height:510px;
margin-top:5px;
text-align:center jeustify;
}

#maincontsometext
{
width:370px;
background-color:#993300;
height:400px;
padding:2px;
}

</style>
</head>
<body>
<div id="mainpagesetpos" align="center">
<div id="mainpageset" align="left">
<div id="adbarright">
<br />
<a href="#NULL">ADS!</a>
<br />
<div id="adbarimageset" align="center">
<img class="adbarimage" src="world_of_warcraft_050905.jpg" />
<img class="adbarimage" src="world_of_warcraft_050905.jpg" />
<img class="adbarimage" src="world_of_warcraft_050905.jpg" />
<img class="adbarimage" src="world_of_warcraft_050905.jpg" />
</div>
</div>
<div id="navbarmain">
<div class="buttonbarmain"><a href="#NULL">Home</a></div>
<div class="buttonbarmain"><a href="#NULL">News</a></div>
<div class="buttonbarmain"><a href="#NULL">Reviews</a></div>
<div class="buttonbarmain"><a href="#NULL">Discuss</a></div>
<div class="buttonbarmain"><a href="#NULL">Links</a></div>
</div>
<div id="mainpagecont">
<p
id="maincontsometext">xxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxv</
p>
</div>
</div>
</div>
</body>
</html>

END CODE
************************************************** ************************

May 14 '07 #1
Share this Question
Share on Google+
5 Replies

P: n/a
On 2007-05-14, Agix <ig**************@gmail.comwrote:
Hi there,

Please check out : http://clarifysolutions.co.uk/certenroll/

The source is included below. This page is a test, so I can play about
with paddings, margins and layouts using divs as semantically
meaningless containers for bunch's of other elements - like everyone
keeps telling me to make my code standards compliant.

This request is not because I want a fix, but because I want to
UNDERSTAND why this is happening.

If you check the link you'll see that the content of that <Ptag just
keeps going and going and going along the line, however, as soon as I
put a space in there, the line breaks. But surely the <ptag should
adhere to the width of it's containing <div>? Can you help me
understand why this is happening.
Lines are only ever broken at proper line breaking points-- at spaces for
example in English text.

If there's nowhere to break the text (your text is "xxxx..." and has no
breaking points), it isn't broken, and overflows its container.
As you can see I tried resorting to giving the paragraph a set width,
which the background-colour adheres to!!! so why not the text?
It overflows. You can control what happens with the overflow property.
You could put overflow: hidden for example on #mainpagecont.
May 14 '07 #2

P: n/a
In our last episode, <11**********************@h2g2000hsg.googlegroups. com>,
the lovely and talented Agix broadcast on
comp.infosystems.www.authoring.html:
If you check the link you'll see that the content of that <Ptag just
keeps going and going and going along the line, however, as soon as I
put a space in there, the line breaks. But surely the <ptag should
adhere to the width of it's containing <div>? Can you help me
understand why this is happening.
It happens because whether they "should" or not, most browsers will not a
force a break to wrap to width. You can hide the excess or overlap adjacent
elements with CSS. Or you could use soft hyphens (­) in the content to
see whether browsers handle them properly (I haven't tried it).

Section 9.3.5 of the HTML 4.01 spec says it (the section itself) is only
descriptive of browser behavior, so one supposes it is not meant to be
prescriptive. But it says Western texts should only be broken at white
space. At any rate, it certainly appears that browsers which refuse to
break text where there is no white space are not doing something wrong.

--
Lars Eighner <http://larseighner.com/ <http://myspace.com/larseighner>
Countdown: 617 days to go.
==============================
What does that have to do with the price of melamine in China?
May 14 '07 #3

P: n/a
Lars Eighner wrote:
Or you could use soft hyphens (­) in the content to
see whether browsers handle them properly (I haven't tried it).
­ has no effect in Firefox. Only a space works. The overflow:
hidden; works too, but of course hides the rest of the long line of x's.

Repairing the incorrect CSS would be a good start:

text-align:center jeustify;

<http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2F clarifysolutions.co.uk%2Fcertenroll%2F>

Never justify any text that you want people to read easily.

--
-bts
-Motorcycles defy gravity; cars just suck
May 14 '07 #4

P: n/a
On 14 May, 13:36, Lars Eighner <use...@larseighner.comwrote:
In our last episode, <1179143954.249711.234...@h2g2000hsg.googlegroups. com>,
the lovely and talented Agix broadcast on
comp.infosystems.www.authoring.html:
If you check the link you'll see that the content of that <Ptag just
keeps going and going and going along the line, however, as soon as I
put a space in there, the line breaks. But surely the <ptag should
adhere to the width of it's containing <div>? Can you help me
understand why this is happening.

It happens because whether they "should" or not, most browsers will not a
force a break to wrap to width. You can hide the excess or overlap adjacent
elements with CSS. Or you could use soft hyphens (­) in the content to
see whether browsers handle them properly (I haven't tried it).

Section 9.3.5 of the HTML 4.01 spec says it (the section itself) is only
descriptive of browser behavior, so one supposes it is not meant to be
prescriptive. But it says Western texts should only be broken at white
space. At any rate, it certainly appears that browsers which refuse to
break text where there is no white space are not doing something wrong.

--
Lars Eighner <http://larseighner.com/ <http://myspace.com/larseighner>
Countdown: 617 days to go.
==============================
What does that have to do with the price of melamine in China?
HA!

Thanks, I realised my mistake just after I posted. I was just being
especially retarded

Thanks for taking the time to explain to me as well, i really
appreciate it.

I am slowly, very slowly starting to understand the way all these tags
behave. My main goal is to use CSS to layout my pages and HTML as the
typeset markup without having to resort to pixel based absolute or
fixed positioning.

kind regards,

Gregory
May 14 '07 #5

P: n/a
Scripsit Agix:
Thanks, I realised my mistake just after I posted. I was just being
especially retarded
No you weren't. You may have been thoughtless or ignorant or something like
that, but please don't insult retarded people by using "retarded" as an
explanation or excuse for simple mistakes.
I am slowly, very slowly starting to understand the way all these tags
behave.
Tags don't behave. They are data.
My main goal is to use CSS to layout my pages and HTML as the
typeset markup without having to resort to pixel based absolute or
fixed positioning.
HTML has very little to do with typeset markup and should have even less to
do with it.

Besides, in practice, for many common purposes, HTML can be used more
effectively for some _layout_ purposes (using table layout) than CSS,
whereas HTML is much poorer in _typesetting_ (in the narrower sense that
excludes layout).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

May 15 '07 #6

This discussion thread is closed

Replies have been disabled for this discussion.