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

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Agix
    #1

    <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
    *************** *************** *************** *************** **************

    Tags: None
    • Ben C
      #2
      Re: &lt;p&gt; tag within a &lt;div&gt; does not respect CSS width, or any width for that matter.

      On 2007-05-14, Agix <ignoranceisbli ss@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.

        Comment

        • Lars Eighner
          #3
          Re: &lt;p&gt; tag within a &lt;div&gt; does not respect CSS width, or any width for that matter.

          In our last episode, <1179143954.249 711.234920@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?

            Comment

            • Beauregard T. Shagnasty
              #4
              Re: &lt;p&gt; tag within a &lt;div&gt; does not respect CSS width, or any width for that matter.

              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

                Comment

                • Agix
                  #5
                  Re: &lt;p&gt; tag within a &lt;div&gt; does not respect CSS width, or any width for that matter.

                  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


                    Comment

                    • Jukka K. Korpela
                      #6
                      Re: &lt;p&gt; tag within a &lt;div&gt; does not respect CSS width, or any width for that matter.

                      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/


                        Comment

                        Previous template Next
                        Working...