img overflowed by text

Discussion in 'HTML' started by Rafal 'Raf256' Maj, Nov 19, 2003.

  1. Hi,
    I want to have an image, overflowed by text (using XHTML,CSS) problem is
    that when I use align="left", then the image was breaking out of <div> in
    with it was (div is a border). AsciiArt example of what I want to achive :


    1) I have a text in <div style="border: 1px">

    ---div------div------div----
    | text text text text text |
    | text text text text text |
    | text text text text text |
    | text text text text text |
    | text text text text text |
    ---div------div------div----


    2) Then I add an image to begin of it :

    ---div------div------div----
    | ***** |
    | *img* |
    | ***** text text text text |
    | text text text text text |
    | text text text text text |
    ---div------div------div----


    3) Then I add align="left" so that text will be all over image:

    ---div------div------div----
    | ***** text text text text |
    | *img* text text text text |
    | ***** text text text text |
    | text text text text text |
    | text text text text text |
    ---div------div------div----

    4) Problem is, that, when image is too long (height) then it's breaking out
    of <div>, instead of making <div> longer (higher) - at leaste under Mozilla
    1.5 the result looks like :

    ---div------div------div----
    | ***** text text text text |
    | * * text text text text |
    | * * text text text text |
    | * * text text text text |
    | * * text text text text |
    --* *-----div------div----
    * *
    *****

    5) when what I want to have is :

    ---div------div------div----
    | ***** text text text text |
    | * * text text text text |
    | * * text text text text |
    | * * text text text text |
    | * * text text text text |
    | * * |
    | * * |
    | * * |
    --*****-----div------div----




    --
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~l-.~~~~~~~~~~~~~~~~~~~
    GG-1175498 ____| ]____,
    Rafal 'Raf256' Maj X-( * )
    Rafal(at)Raf256(dot)com ,"----------"
    Rafal 'Raf256' Maj, Nov 19, 2003
    #1
    1. Advertising

  2. Rafal 'Raf256' Maj wrote:
    > I want to have an image, overflowed by text (using XHTML,CSS)
    > ...


    Have you considered CSS background-image:

    --
    William Tasso - http://WilliamTasso.com
    William Tasso, Nov 19, 2003
    #2
    1. Advertising

  3. news:bpelfg$1n6uvb$-berlin.de

    > Have you considered CSS background-image:


    Make an <div> with defined width and height and background image? It has
    few disadvantages (no alt, no title, no easy download, no image google
    indexing)... but maybe its a good workaround for now... how can I make an
    text floating around <div> ?

    222222222222222222222222222
    211111 text text text text2
    21 1 text text text text2
    21img1 text text text text2
    21 1 text text text text2
    211111 text text text text2
    222222222222222222222222222

    1 - div #1
    2 - div #2

    --
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~l-.~~~~~~~~~~~~~~~~~~~
    GG-1175498 ____| ]____,
    Rafal 'Raf256' Maj X-( * )
    Rafal(at)Raf256(dot)com ,"----------"
    Rafal 'Raf256' Maj, Nov 19, 2003
    #3
  4. news:Xns943827E5E5E38raf256com@213.180.128.20

    > how can
    > I make an text floating around <div> ?


    better example of what I ment:

    2222222222222222222222222222
    211111 text text text text 2
    21 1 text text text text 2
    21img1 text text text text 2
    21 1 text text text text 2
    211111 text text text text 2
    2 text text text text text 2
    2 text text text text text 2
    2 text text text text text 2
    2 text text text text text 2
    2222222222222222222222222222



    --
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~l-.~~~~~~~~~~~~~~~~~~~
    GG-1175498 ____| ]____,
    Rafal 'Raf256' Maj X-( * )
    Rafal(at)Raf256(dot)com ,"----------"
    Rafal 'Raf256' Maj, Nov 19, 2003
    #4
  5. Rafal 'Raf256' Maj

    Eric Bohlman Guest

    "Rafal 'Raf256' Maj" <> wrote in
    news:Xns943825DFB6AB7raf256com@213.180.128.20:

    >
    > Hi,
    > I want to have an image, overflowed by text (using XHTML,CSS) problem
    > is that when I use align="left", then the image was breaking out of
    > <div> in with it was (div is a border). AsciiArt example of what I
    > want to achive :
    >
    >
    > 1) I have a text in <div style="border: 1px">
    >
    > ---div------div------div----
    >| text text text text text |
    >| text text text text text |
    >| text text text text text |
    >| text text text text text |
    >| text text text text text |
    > ---div------div------div----
    >
    >
    > 2) Then I add an image to begin of it :
    >
    > ---div------div------div----
    >| ***** |
    >| *img* |
    >| ***** text text text text |
    >| text text text text text |
    >| text text text text text |
    > ---div------div------div----
    >
    >
    > 3) Then I add align="left" so that text will be all over image:
    >
    > ---div------div------div----
    >| ***** text text text text |
    >| *img* text text text text |
    >| ***** text text text text |
    >| text text text text text |
    >| text text text text text |
    > ---div------div------div----


    You actually want to give the image a "float:left" property in your CSS,
    rather than using the deprecated "align" attribute in your HTML.

    >
    > 4) Problem is, that, when image is too long (height) then it's
    > breaking out of <div>, instead of making <div> longer (higher) - at
    > leaste under Mozilla 1.5 the result looks like :
    >
    > ---div------div------div----
    >| ***** text text text text |
    >| * * text text text text |
    >| * * text text text text |
    >| * * text text text text |
    >| * * text text text text |
    > --* *-----div------div----
    > * *
    > *****


    Yes, by default a floated element can break out of its container. This is
    actually desirable in most cases, just not in yours (think of an image
    inset into the first of several paragraphs. If it couldn't break out of
    the first paragraph, the subsequent paragraphs couldn't flow around it.

    >
    > 5) when what I want to have is :
    >
    > ---div------div------div----
    >| ***** text text text text |
    >| * * text text text text |
    >| * * text text text text |
    >| * * text text text text |
    >| * * text text text text |
    >| * * |
    >| * * |
    >| * * |
    > --*****-----div------div----


    You accomplish this by making the last element of your <div> be a block
    element (typically a <div> that contains nothing but a non-breaking-space)
    which has the "clear:left" CSS property set. That forces the <div> to be
    tall enough to contain the image.
    Eric Bohlman, Nov 19, 2003
    #5
  6. Rafal 'Raf256' Maj

    Sid Ismail Guest

    On 19 Nov 2003 02:43:26 GMT, "Rafal 'Raf256' Maj" <> wrote:

    : 4) Problem is, that, when image is too long (height) then it's breaking out
    : of <div>, instead of making <div> longer (higher) - at leaste under Mozilla
    : 1.5 the result looks like :
    :
    : ---div------div------div----
    : | ***** text text text text |
    : | * * text text text text |
    : | * * text text text text |
    : | * * text text text text |
    : | * * text text text text |
    : --* *-----div------div----
    : * *
    : *****
    :
    : 5) when what I want to have is :
    :
    : ---div------div------div----
    : | ***** text text text text |
    : | * * text text text text |
    : | * * text text text text |
    : | * * text text text text |
    : | * * text text text text |
    : | * * |
    : | * * |
    : | * * |
    : --*****-----div------div----
    :


    At the end of your text, state
    <br clear="all">

    Sid
    Sid Ismail, Nov 19, 2003
    #6
  7. Rafal 'Raf256' Maj

    rf Guest

    "Sid Ismail" <> wrote in message
    news:...
    > On 19 Nov 2003 02:43:26 GMT, "Rafal 'Raf256' Maj" <> wrote:


    > At the end of your text, state
    > <br clear="all">


    Deprecated Sid :) Did you mean <br style="clear: both;"> ?

    Cheers
    Richard.
    rf, Nov 19, 2003
    #7
  8. Rafal 'Raf256' Maj

    Sid Ismail Guest

    On Wed, 19 Nov 2003 10:26:04 GMT, "rf" <> wrote:

    : "Sid Ismail" <> wrote in message
    : news:...
    : > On 19 Nov 2003 02:43:26 GMT, "Rafal 'Raf256' Maj" <> wrote:
    :
    : > At the end of your text, state
    : > <br clear="all">
    :
    : Deprecated Sid :) Did you mean <br style="clear: both;"> ?


    Align=left is also deprecated. He either uses that BR in a deprecated
    environment (as a quick fix) or changes to float:left in CSS, then to use
    the CSS equivalent.

    Sid
    Sid Ismail, Nov 19, 2003
    #8
  9. Rafal 'Raf256' Maj

    rf Guest

    "Sid Ismail" <> wrote in message
    news:p...
    > On Wed, 19 Nov 2003 10:26:04 GMT, "rf" <> wrote:
    >
    > : "Sid Ismail" <> wrote in message
    > : news:...
    > : > On 19 Nov 2003 02:43:26 GMT, "Rafal 'Raf256' Maj" <>

    wrote:
    > :
    > : > At the end of your text, state
    > : > <br clear="all">
    > :
    > : Deprecated Sid :) Did you mean <br style="clear: both;"> ?
    >
    >
    > Align=left is also deprecated. He either uses that BR in a deprecated
    > environment (as a quick fix) or changes to float:left in CSS, then to use
    > the CSS equivalent.


    Sorry Sid. Didn't spot that in the OP (seems to be using some sort of
    encoding that makes the text miniscule in my newsreader). You are correct,
    as I always expect :)

    Cheers
    Richard.
    rf, Nov 19, 2003
    #9
  10. Rafal 'Raf256' Maj wrote:

    > Make an <div> with defined width and height and background image? It has
    > few disadvantages (no alt, no title, no easy download, no image google
    > indexing)... but maybe its a good workaround for now... how can I make an
    > text floating around <div> ?


    The main disadvantage is much worse: The "div" contains text, so you can
    never know what "width" and "height" is necessary for the text.

    > 222222222222222222222222222
    > 211111 text text text text2
    > 21 1 text text text text2
    > 21img1 text text text text2
    > 21 1 text text text text2
    > 211111 text text text text2
    > 222222222222222222222222222


    Some people will see that with another font, or with another font size
    (perhaps much larger), or both. And the text might spill out of the "div".

    --
    Bertilo Wennergren <> <http://www.bertilow.com>
    Bertilo Wennergren, Nov 19, 2003
    #10
  11. rf wrote:

    > "Sid Ismail" <> wrote in message
    > news:...


    >>On 19 Nov 2003 02:43:26 GMT, "Rafal 'Raf256' Maj" <> wrote:


    >>At the end of your text, state
    >><br clear="all">


    > Deprecated Sid :) Did you mean <br style="clear: both;"> ?


    The best way (if you subscribe to keeping content and presentation
    separate) is to set a "min-height" for the "div". Unfortunately
    "min-height" will only work in modern browsers (not in e.g. MSIE).

    That might still be the way to go, if it can be accepted that the images
    does spill out of the container in old browsers. However, if that would
    completely ruin the page display, then regrettably a "br" (or "div")
    with "clear: both" is the only option.

    --
    Bertilo Wennergren <> <http://www.bertilow.com>
    Bertilo Wennergren, Nov 19, 2003
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. news.austin.rr.com

    how to download img from html img tag

    news.austin.rr.com, Apr 27, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    502
    Steve C. Orr [MVP, MCSD]
    Apr 27, 2005
  2. Jason
    Replies:
    3
    Views:
    582
  3. Prabu
    Replies:
    1
    Views:
    412
    Prabu
    Mar 5, 2007
  4. raashid bhatt

    why dosent buffer gets overflowed

    raashid bhatt, Aug 22, 2008, in forum: C Programming
    Replies:
    11
    Views:
    580
    cr88192
    Aug 26, 2008
  5. Jason
    Replies:
    5
    Views:
    93
    nutso fasst
    Oct 13, 2006
Loading...

Share This Page