CSS word long within the div

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • provaands

    CSS word long within the div

    Defects of the code below:
    with Mozilla, Netscape, the word hellooo..... exit outside from the div;
    with IE 5,5, 6 the word hellooo.... increase the width of the div, even
    if i have fixed to 100px the width;

    Question:
    can I make so that word hellooooo..... remains all within to the div?
    I do not want to use overflow in order to see the text with the sliding bar,
    but it must to increase the height of the div, so the div can to contain
    all the word hellooo.....
    on more rows;
    I have tried to put heigth=auto but it does not change null;

    <div style='width:20 0px;background: green;'>

    <div style='width:10 0px; background:#99C CFF;'>

    hellooooooooooo ooooooooooooooo ooooooooooooooo ooooooooooooooo ooooooooo
    </div>

    <div style='width:10 0px; background:silv er;'>
    by by
    </div>
    </div>


    thank you
  • Spartanicus

    #2
    Re: CSS word long within the div

    provaands <invalidamail@t ucossa.it> wrote:
    [color=blue]
    >Defects of the code below:
    >with Mozilla, Netscape, the word hellooo..... exit outside from the div;
    >with IE 5,5, 6 the word hellooo.... increase the width of the div, even
    >if i have fixed to 100px the width;
    >
    >Question:
    >can I make so that word hellooooo..... remains all within to the div?
    >I do not want to use overflow in order to see the text with the sliding bar,
    >but it must to increase the height of the div, so the div can to contain
    >all the word hellooo.....
    >on more rows;
    > I have tried to put heigth=auto but it does not change null;
    >
    ><div style='width:20 0px;background: green;'>
    >
    > <div style='width:10 0px; background:#99C CFF;'>
    >
    >helloooooooooo ooooooooooooooo ooooooooooooooo ooooooooooooooo oooooooooo
    > </div>
    >
    > <div style='width:10 0px; background:silv er;'>
    > by by
    > </div>
    ></div>[/color]

    Why are you using a block level element?
    Why do you want to set a width?

    An url with a sample of what you are trying to do using real content
    would be much more useful.

    --
    Spartanicus

    Comment

    • provaands

      #3
      Re: CSS word long within the div

      Spartanicus wrote:[color=blue]
      > provaands <invalidamail@t ucossa.it> wrote:
      >
      >[color=green]
      >>Defects of the code below:
      >>with Mozilla, Netscape, the word hellooo..... exit outside from the div;
      >>with IE 5,5, 6 the word hellooo.... increase the width of the div, even
      >>if i have fixed to 100px the width;
      >>
      >>Question:
      >>can I make so that word hellooooo..... remains all within to the div?
      >>I do not want to use overflow in order to see the text with the sliding bar,
      >>but it must to increase the height of the div, so the div can to contain
      >>all the word hellooo.....
      >>on more rows;
      >> I have tried to put heigth=auto but it does not change null;
      >>
      >><div style='width:20 0px;background: green;'>
      >>
      >> <div style='width:10 0px; background:#99C CFF;'>
      >>
      >>hellooooooooo ooooooooooooooo ooooooooooooooo ooooooooooooooo ooooooooooo
      >> </div>
      >>
      >> <div style='width:10 0px; background:silv er;'>
      >> by by
      >> </div>
      >></div>[/color][/color]

      [color=blue]
      > Why are you using a block level element?[/color]
      Because this is a portion of a layout more complex;
      the code inherent only one portion of the layout complete (that isn't
      important for resolve the problem)[color=blue]
      > Why do you want to set a width?[/color]
      Becuse the left column of layout is so (colum with width non variable)[color=blue]
      > An url with a sample of what you are trying to do using real content
      > would be much more useful.[/color]
      I tested on localhost;
      but the question is simple:
      if I would like used that code with that text is it possible resolve the
      problem ?




      Comment

      • Spartanicus

        #4
        Re: CSS word long within the div

        provaands <invalidamail@t ucossa.it> wrote:
        [color=blue][color=green]
        >> Why are you using a block level element?[/color][/color]
        [color=blue]
        >Because this is a portion of a layout more complex;
        >the code inherent only one portion of the layout complete (that isn't
        >important for resolve the problem)[/color]

        You won't let us see the "problem", you think that you've described it,
        but all you've done is present a "solution" that doesn't do what you
        want it to do.

        A proper answer requires real content:


        --
        Spartanicus

        Comment

        • jmm-list-gn

          #5
          Re: CSS word long within the div

          provaands wrote:[color=blue]
          > [...] increase the width of the div, even
          > if i have fixed to 100px the width;
          >[/color]
          "width" sets a minimum width, not an absolute. You could try
          "max-width" but it is not broadly supported yet.

          --
          jmm dash list (at) sohnen-moe (dot) com
          (Remove .AXSPAMGN for email)

          Comment

          • Spartanicus

            #6
            Re: CSS word long within the div

            jmm-list-gn <jmm-list.AXSPAMGN@s ohnen-moe.com> wrote:
            [color=blue][color=green]
            >> [...] increase the width of the div, even
            >> if i have fixed to 100px the width;
            >>[/color]
            > "width" sets a minimum width, not an absolute.[/color]

            Incorrect.

            --
            Spartanicus

            Comment

            • David Dorward

              #7
              Re: CSS word long within the div

              jmm-list-gn wrote:[color=blue]
              > provaands wrote:[color=green]
              >> [...] increase the width of the div, even
              >> if i have fixed to 100px the width;
              >>[/color]
              > "width" sets a minimum width, not an absolute.[/color]

              Not in CSS.

              Internet Explorer has a bug in which it treats width as min-width when
              overflow is set to visible.... but that's just a bug in one browser.

              --
              David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
              Home is where the ~/.bashrc is

              Comment

              • Mikko Rantalainen

                #8
                Re: CSS word long within the div

                provaands / 2004-08-14 23:36:
                [color=blue]
                > Question:
                > can I make so that word hellooooo..... remains all within to the div?[/color]

                You have
                [color=blue]
                > <div style='width:10 0px; background:#99C CFF;'>
                > hellooooooooooo ooooooooooooooo ooooooooooooooo ooooooooooooooo ooooooooo
                > </div>[/color]

                You want

                <div class="enclose" > hello....ooo </div>

                with a style sheet rules

                ..enclose { min-width: 100px; }
                * html .enclose { width: 100px; }

                That is, you really want to use 'min-width' property. The latter
                line is for MSIE which doesn't support 'min-width'. Fortunately it
                implements 'width' incorrectly and it works just like 'min-width' is
                supposed to work. In addition, MSIE has a CSS selector bug that
                makes it to match "* html .enclose" selector with all elements that
                have class "enclose". So only MSIE sees the 'width' rule.

                If you care that some browsers do not support min-width and do not
                have the same parser bug as MSIE and the page layout is too fragile
                to take default of 'auto' for the 'width', then you could try
                different rules instead:

                ..enclose { width: 100px; }
                html>body .enclose { width: auto; min-width: 100px; }

                This time we *undo* the incorrect 'width' setting with a rule that
                has "too complex" selector for MSIE and friends that implement
                'width' incorrectly. Hopefully every browser that understands this
                selector also implements 'min-width'.

                If you want to also support MSIE5 which has broken box model it gets
                more complicated; if you have borders, paddings or margins, you have
                to subract those from the 'width'...

                If you really want to go through all of this and find out about
                different browser bugs, here's a great place to start:


                --
                Mikko

                Comment

                • Andrew Thompson

                  #9
                  Re: CSS word long within the div

                  On Sat, 14 Aug 2004 22:08:07 +0100, Spartanicus wrote:[color=blue]
                  > provaands <invalidamail@t ucossa.it> wrote:
                  >[color=green]
                  >>Defects of the code below:[/color][/color]
                  ...[color=blue]
                  > An url with a sample of what you are trying to do using real content
                  > would be much more useful.[/color]

                  You mean, like this erudite author proposes?
                  <http://www.spartanicus .utvinternet.ie/help_us_help_yo u.htm> *
                  Why did you not link to it?

                  * The only concept that it does not seem to address
                  specifically is that the content be 'real', which
                  I agree might help here.

                  --
                  Andrew Thompson
                  http://www.PhySci.org/ Open-source software suite
                  http://www.PhySci.org/codes/ Web & IT Help
                  http://www.1point1C.org/ Science & Technology

                  Comment

                  • Spartanicus

                    #10
                    Re: CSS word long within the div

                    Andrew Thompson <SeeMySites@www .invalid> wrote:
                    [color=blue][color=green]
                    >> An url with a sample of what you are trying to do using real content
                    >> would be much more useful.[/color]
                    >
                    >You mean, like this erudite author proposes?
                    ><http://www.spartanicus .utvinternet.ie/help_us_help_yo u.htm> *
                    >Why did you not link to it?[/color]

                    Because the lack of real content was the main problem here, although
                    mentioned in the above document I suspect that most people would miss it
                    (creating a minimised test case is the main topic of that document).
                    [color=blue]
                    >* The only concept that it does not seem to address
                    >specifically is that the content be 'real'[/color]

                    See, you also missed it :-)

                    --
                    Spartanicus

                    Comment

                    • Spartanicus

                      #11
                      Re: CSS word long within the div

                      Mikko Rantalainen <mira@st.jyu.fi > wrote:
                      [color=blue][color=green]
                      >> Question:
                      >> can I make so that word hellooooo..... remains all within to the div?[/color]
                      >
                      >You have
                      >[color=green]
                      >> <div style='width:10 0px; background:#99C CFF;'>
                      >> hellooooooooooo ooooooooooooooo ooooooooooooooo ooooooooooooooo ooooooooo
                      >> </div>[/color]
                      >
                      >You want
                      >
                      ><div class="enclose" > hello....ooo </div>
                      >
                      >with a style sheet rules
                      >
                      >.enclose { min-width: 100px; }
                      >* html .enclose { width: 100px; }[/color]

                      Incorrect, it doesn't do what the op wants, in fact it doesn't even do
                      what you want it to do :)

                      --
                      Spartanicus

                      Comment

                      Working...