473,704 Members | 5,130 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitl ed 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(aback ground.gif);
}

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

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

..buttonbarmain :hover
{
background-image:url(butto n.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;
}

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

</style>
</head>
<body>
<div id="mainpageset pos" align="center">
<div id="mainpageset " align="left">
<div id="adbarright" >
<br />
<a href="#NULL">AD S!</a>
<br />
<div id="adbarimages et" align="center">
<img class="adbarima ge" src="world_of_w arcraft_050905. jpg" />
<img class="adbarima ge" src="world_of_w arcraft_050905. jpg" />
<img class="adbarima ge" src="world_of_w arcraft_050905. jpg" />
<img class="adbarima ge" src="world_of_w arcraft_050905. jpg" />
</div>
</div>
<div id="navbarmain" >
<div class="buttonba rmain"><a href="#NULL">Ho me</a></div>
<div class="buttonba rmain"><a href="#NULL">Ne ws</a></div>
<div class="buttonba rmain"><a href="#NULL">Re views</a></div>
<div class="buttonba rmain"><a href="#NULL">Di scuss</a></div>
<div class="buttonba rmain"><a href="#NULL">Li nks</a></div>
</div>
<div id="mainpagecon t">
<p
id="maincontsom etext">xxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxv</
p>
</div>
</div>
</div>
</body>
</html>

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

May 14 '07 #1
5 13513
On 2007-05-14, Agix <ig************ **@gmail.comwro te:
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
In our last episode, <11************ **********@h2g2 000hsg.googlegr oups.com>,
the lovely and talented Agix broadcast on
comp.infosystem s.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
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?profi le=css2&warning =2&uri=http%3A% 2F%2Fclarifysol utions.co.uk%2F certenroll%2F>

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

--
-bts
-Motorcycles defy gravity; cars just suck
May 14 '07 #4
On 14 May, 13:36, Lars Eighner <use...@larseig hner.comwrote:
In our last episode, <1179143954.249 711.234...@h2g2 000hsg.googlegr oups.com>,
the lovely and talented Agix broadcast on
comp.infosystem s.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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

61
24481
by: Toby Austin | last post by:
I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will 'stretch'</td> <td valign="top" width="300">some data that won't 'stetch'</td> </tr> </table>
18
4383
by: Timothy Casey | last post by:
Thanks in advance... =~= Timothy Casey South Australia worloq@iprimus.com.au Formerly: casey@smart.net.au
2
7573
by: listaction | last post by:
Hi Folks, can you help me by explaining how the code below can be translated using <div> and achieve the same effect? Thanks, LA <html> <body> <table bgcolor="#000000" width="100%" cellspacing="1">
9
3143
by: Julia Briggs | last post by:
How do I construct a <iframe> or equivalent for FireFox/NS browsers, inside a screen centered <div> tag? Can it be done?
7
3628
by: pamelafluente | last post by:
The precious input given by Laurent, Martin, Benjamin about XMLHttpRequest in Javascript, has made me think that perhaps I could improve what I am currently doing by using Ajax. Let's make it simple and schematic, to see if there is a simple Ajax answer to this. A. I have an HTML page which has some pure html/css code representing a GRID of cell. The page may also contain other objects (images, etc). B. On the server I have a windows...
28
5360
by: Kent Feiler | last post by:
1. Here's some html from a W3C recommendations page. <P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>cccccccc<P>dddddddd</DIV> 2.Although I didn't think it would make any difference, I tried it with the </p>s included as well. <P>aaaaaaaaa</p><DIV>bbbbbbbbb</DIV><DIV>cccccccc<P>dddddddd</p></DIV>
10
3195
by: Summercoolness | last post by:
so i am starting to use more of <br /and <div style="clear: both" / which is the XHTML style... now, won't those actually confuse the old browsers? for example, will the old browser treat the "div" as not closing, and so everything after the div will be treated as part of that div?
5
5260
nathj
by: nathj | last post by:
Hi All, I'm working on a new site that has a two column layout underneath a title bar. If you check out: http://www.christianleadership.org.uk/scratch/mainpage.php using IE or Opera you will see what I am after as these browsers work fine. However, in FF the results are slightly different - take a look and you'll see that the <p>, within <div class="mainContent"> has shot way over to the right. I've been working on this for 2days now...
4
5283
by: harryusa | last post by:
I am trying to center 2 images concentrically which are z-indexed to lay on top of each other making an image with a border from another image that has a transparent center. I need the images to be horizonally and vertically centered within a <TD> </TD> area. No matter what I do the two image just present one above the other, albeit centered, NOT on top of each other. I originally did the entire page layout in TABLES until I found out I.E. 7...
0
8764
marktang
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8677
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
9020
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7879
agi2029
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6603
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5926
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
3130
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2468
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2074
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.