Floating an IMG within a DIV

Discussion in 'HTML' started by Oli Filth, Dec 25, 2004.

  1. Oli Filth

    Oli Filth Guest

    Hello.

    I'm creating a DIV to hold a short article and an associated image, and
    I want the image on the left.

    See http://olifilth.co.uk/test4.htm for an example.

    However, with this set-up (as you can see in the example if your browser
    window is wide enough), the containing DIV only stretches down as far as
    the end of the text, not the end of the image.

    How would one do this properly, so that the DIV graphically contains
    everything, regardless of whether the image or the text is "higher",
    using proper CSS layout rather than tables?

    TIA,
    Oli
    Oli Filth, Dec 25, 2004
    #1
    1. Advertising

  2. Oli Filth wrote:

    > I'm creating a DIV to hold a short article and an associated image,
    > and I want the image on the left.


    > However, with this set-up (as you can see in the example if your
    > browser window is wide enough), the containing DIV only stretches
    > down as far as the end of the text, not the end of the image.


    <div>
    <p style="float:left;margin-right:15px;margin-top:0"><img src....></p>
    <p style="margin-top:0">Associated text here</p>
    </div>

    <div style="clear:both"> <!-- next block -->

    The 'margin-top' attributes make sure the upper line of the image at of the
    text equals in all browsers.

    --
    Yours
    Erik Ginnerskov
    http://hjemmesideskolen.dk - http://html-faq.dk
    http://ginnerskov.frac.dk
    Erik Ginnerskov, Dec 25, 2004
    #2
    1. Advertising

  3. Oli Filth

    Oli Filth Guest

    Erik Ginnerskov wrote:
    > Oli Filth wrote:
    >
    >
    >>I'm creating a DIV to hold a short article and an associated image,
    >>and I want the image on the left.

    >
    >
    >>However, with this set-up (as you can see in the example if your
    >>browser window is wide enough), the containing DIV only stretches
    >>down as far as the end of the text, not the end of the image.

    >
    >
    > <div>
    > <p style="float:left;margin-right:15px;margin-top:0"><img src....></p>
    > <p style="margin-top:0">Associated text here</p>
    > </div>
    >
    > <div style="clear:both"> <!-- next block -->
    >
    > The 'margin-top' attributes make sure the upper line of the image at of the
    > text equals in all browsers.
    >


    Nope, that doesn't help (except for the clear:both). The IMG still goes
    past the bottom of the DIV (see http://olifilth.co.uk/test5.htm). I want:

    --------------------------------------------------------------
    | ----------------- DIV |
    | | | Blah blah blah blah blah blah blah blah |
    | | | Blah blah blah blah blah blah blah blah |
    | | IMG | Blah blah blah blah blah blah blah blah |
    | | | Blah blah blah blah blah blah blah blah. |
    | | | |
    | | | |
    | ----------------- |
    --------------------------------------------------------------

    Any suggestions?
    Oli
    Oli Filth, Dec 25, 2004
    #3
  4. In article <7oizd.6108$>, Oli Filth
    () dropped a +5 bundle of words...

    > Erik Ginnerskov wrote:
    > > Oli Filth wrote:
    > >
    > >
    > >>I'm creating a DIV to hold a short article and an associated image,
    > >>and I want the image on the left.

    > >
    > >
    > >>However, with this set-up (as you can see in the example if your
    > >>browser window is wide enough), the containing DIV only stretches
    > >>down as far as the end of the text, not the end of the image.

    > >
    > >
    > > <div>
    > > <p style="float:left;margin-right:15px;margin-top:0"><img src....></p>
    > > <p style="margin-top:0">Associated text here</p>
    > > </div>
    > >
    > > <div style="clear:both"> <!-- next block -->
    > >
    > > The 'margin-top' attributes make sure the upper line of the image at of the
    > > text equals in all browsers.
    > >

    >
    > Nope, that doesn't help (except for the clear:both). The IMG still goes
    > past the bottom of the DIV (see http://olifilth.co.uk/test5.htm). I want:
    >
    > --------------------------------------------------------------
    > | ----------------- DIV |
    > | | | Blah blah blah blah blah blah blah blah |
    > | | | Blah blah blah blah blah blah blah blah |
    > | | IMG | Blah blah blah blah blah blah blah blah |
    > | | | Blah blah blah blah blah blah blah blah. |
    > | | | |
    > | | | |
    > | ----------------- |
    > --------------------------------------------------------------
    >
    > Any suggestions?
    > Oli
    >


    <style>
    img {float:left}
    </style>

    <div>
    <p><img src="beer.jpg"/></p>
    <p>Text and stuff goes here very nicely.</p>
    </div>

    --
    Starshine Moonbeam
    mhm31x9 Smeeter#29 WSD#30
    sTaRShInE_mOOnBeAm aT HoTmAil dOt CoM
    Starshine Moonbeam, Dec 25, 2004
    #4
  5. Oli Filth

    Oli Filth Guest

    Starshine Moonbeam wrote:
    > In article <7oizd.6108$>, Oli Filth
    > () dropped a +5 bundle of words...
    >
    >
    >>Erik Ginnerskov wrote:
    >>
    >>>Oli Filth wrote:
    >>>
    >>>
    >>>
    >>>>I'm creating a DIV to hold a short article and an associated image,
    >>>>and I want the image on the left.
    >>>
    >>>
    >>>>However, with this set-up (as you can see in the example if your
    >>>>browser window is wide enough), the containing DIV only stretches
    >>>>down as far as the end of the text, not the end of the image.
    >>>
    >>>
    >>><div>
    >>><p style="float:left;margin-right:15px;margin-top:0"><img src....></p>
    >>><p style="margin-top:0">Associated text here</p>
    >>></div>
    >>>
    >>><div style="clear:both"> <!-- next block -->
    >>>
    >>>The 'margin-top' attributes make sure the upper line of the image at of the
    >>>text equals in all browsers.
    >>>

    >>
    >>Nope, that doesn't help (except for the clear:both). The IMG still goes
    >>past the bottom of the DIV (see http://olifilth.co.uk/test5.htm). I want:
    >>
    >>--------------------------------------------------------------
    >>| ----------------- DIV |
    >>| | | Blah blah blah blah blah blah blah blah |
    >>| | | Blah blah blah blah blah blah blah blah |
    >>| | IMG | Blah blah blah blah blah blah blah blah |
    >>| | | Blah blah blah blah blah blah blah blah. |
    >>| | | |
    >>| | | |
    >>| ----------------- |
    >>--------------------------------------------------------------
    >>
    >>Any suggestions?
    >>Oli
    >>

    >
    >
    > <style>
    > img {float:left}
    > </style>
    >
    > <div>
    > <p><img src="beer.jpg"/></p>
    > <p>Text and stuff goes here very nicely.</p>
    > </div>
    >


    That essentially takes me back to what I started with. See
    http:/olifilth.co.uk/test6.htm for why that doesn't work!

    Oli
    Oli Filth, Dec 25, 2004
    #5
  6. Oli Filth

    Phoenix Guest

    Oli Filth wrote:

    >
    > That essentially takes me back to what I started with. See
    > http:/olifilth.co.uk/test6.htm for why that doesn't work!
    >
    > Oli


    *sigh* It's really very simple. Just take the

    </DIV>
    <P style="clear: both">

    and basically flip it around to

    <P style="clear: both">
    </DIV>

    Of course, this isn't good, semantically, so you should probably replace
    the <p> with a <div>, but keep the clear: both.
    Phoenix, Dec 25, 2004
    #6
  7. Oli Filth

    Oli Filth Guest

    Phoenix wrote:
    > Oli Filth wrote:
    >
    >>
    >> That essentially takes me back to what I started with. See
    >> http:/olifilth.co.uk/test6.htm for why that doesn't work!
    >>
    >> Oli

    >
    >
    > *sigh* It's really very simple. Just take the


    I would have thought this should be simple too! But it's not, see below
    for why (or maybe I'm just being slow today).

    >
    > </DIV>
    > <P style="clear: both">
    >
    > and basically flip it around to
    >
    > <P style="clear: both">
    > </DIV>
    >
    > Of course, this isn't good, semantically, so you should probably replace
    > the <p> with a <div>, but keep the clear: both.


    Thank you! :) That works in Firefox, e.g.:

    CSS
    ===

    IMG { float: left }
    DIV.boxend { clear: both }
    DIV.container { ... whatever ... }

    HTML
    ====

    <DIV style="story">
    <IMG src="image.jpg">
    ... text ...
    <DIV style="boxend"></DIV>
    </DIV>

    See http://olifilth.co.uk/test7.htm.

    Except in Opera (7.54) and IE (6), where the container DIV
    padding-bottom appears to be wrong cause the empty DIV gets finite
    height, even if you set its CSS height, line-height, padding and margin
    attributes to 0.

    And in IE (6), it doesn't seem to be displaying the text in the
    container DIV anymore unless you re-size the browser window (but I'm
    assuming that's just IE playing its usual games).

    Also, it's not great from the HTML 4.01 Strict, semantic, "no
    presentation detail in the HTML" point of view. Is there not a way of
    doing this through CSS alone, without having to stick filler into the
    HTML? Or is this just a hack I'll have to live with?

    Oli
    Oli Filth, Dec 25, 2004
    #7
  8. On Sat, 25 Dec 2004 17:27:08 GMT, Oli Filth
    <> wrote:

    [snip]

    > However, with this set-up (as you can see in the example if your browser
    > window is wide enough), the containing DIV only stretches down as far as
    > the end of the text, not the end of the image.


    Floated elements are removed from the normal flow so it cannot contribute
    to the height of the containing DIV.

    > How would one do this properly, so that the DIV graphically contains
    > everything, regardless of whether the image or the text is "higher",
    > using proper CSS layout rather than tables?


    Set a minimum height for the container. The min-height property is fine
    for modern browsers:

    div.story {
    /* ... */
    min-height: 266px; /* [1] */
    }

    though you'll have to hack for compatibility with IE:

    * html div.story {
    /* The overflow property must be visible (the default). */
    height: 266px;
    }

    Quirks-mode IE 6 and versions earlier than that will obviously suffer from
    Microsoft's errant box model. You could either use a CSS hack to get
    around that, or nest a DIV and only specify the height on that DIV and the
    other properties (namely the padding and border) on the outer one.

    Hope that helps,
    Mike


    [1] In case you're wondering where the 266 comes from, it's the height of
    your image.

    Merry Christmas

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
    Michael Winter, Dec 25, 2004
    #8
  9. Oli Filth

    Henry Guest

    Oli Filth wrote:


    Check this one.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><title>Floating IMG inside DIV problem</title>

    <style type="text/css">

    body
    {
    background-color: #FFF;
    padding: 12px;
    margin: 0;
    font-family: Verdana, Sans-Serif;
    font-size: 100%;
    }



    p {
    margin: 10px;
    }

    div#box {display: block;
    margin: 0px auto;
    width: 95%;
    border: solid 1px #C2A6FF;
    background: #F2FFFF;
    text-align: center;}

    </style>

    </head>
    <body>

    <h1>Floating IMG inside DIV problem</h1>
    <p>
    In the example below, the yellow DIV contains both the text and the
    image. The image
    is floated to the left. However, this means that as you increase the
    browser width,
    the DIV only stretches down as far as the end of the text. Bummer.
    </p>

    <div id="box">

    <img border="0" src="smile.gif" width="256" height="266"
    align="left"></h4>
    <p>Lorem
    ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
    <p>&nbsp;</p>
    <p>Lorem
    ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
    </div>

    <p align="center">And here all seems to be all right</p>

    </body></html>
    Henry, Dec 26, 2004
    #9
  10. Oli Filth

    Phoenix Guest

    Oli Filth wrote:
    > Phoenix wrote:
    >> *sigh* It's really very simple. Just take the

    >
    >
    > I would have thought this should be simple too! But it's not, see below
    > for why (or maybe I'm just being slow today).
    >


    It's not just you, it seems. heh. I didn't really test my code, I just
    thought it was weird that the clearing was OUTSIDE the box you were
    supposed to stretch the image in, so I complained. Especially since I
    remember having accomplished this before. ;)

    >> </DIV>
    >> <P style="clear: both">
    >>
    >> and basically flip it around to
    >>
    >> <P style="clear: both">
    >> </DIV>
    >>
    >> Of course, this isn't good, semantically, so you should probably
    >> replace the <p> with a <div>, but keep the clear: both.

    >
    >
    > Thank you! :) That works in Firefox, e.g.:
    >
    > CSS
    > ===
    >
    > IMG { float: left }
    > DIV.boxend { clear: both }
    > DIV.container { ... whatever ... }
    >
    > HTML
    > ====
    >
    > <DIV style="story">
    > <IMG src="image.jpg">
    > ... text ...
    > <DIV style="boxend"></DIV>
    > </DIV>
    >
    > See http://olifilth.co.uk/test7.htm.


    Yeah. Looks fine in Konqueror (3.1.4) too, in case you care. ;)

    > Except in Opera (7.54) and IE (6), where the container DIV
    > padding-bottom appears to be wrong cause the empty DIV gets finite
    > height, even if you set its CSS height, line-height, padding and margin
    > attributes to 0.
    >
    > And in IE (6), it doesn't seem to be displaying the text in the
    > container DIV anymore unless you re-size the browser window (but I'm
    > assuming that's just IE playing its usual games).


    I can't see it in IE (I'm on Linux, and I have trouble with the Windows
    Emulator at the moment. heh.) but I would guess that IE screws it up,
    yes. It surprises me more that Opera would do something weird. (and that
    I can observe myself, of course) It's like there's an extra line there
    without any purpose.

    I, of course (heh) figured out a way to fix it in Opera at least. It's
    not the DIV causing the trouble at all, it's actually the P that comes
    before it. Which means that if you try this:

    CSS
    ===

    DIV.story P { margin-bottom: 0; }

    The extra "line" disappears in Opera. (You can also remove everything on
    the DIV.boxend, except for the "clear: both". They are irrelevant. ;)

    > Also, it's not great from the HTML 4.01 Strict, semantic, "no
    > presentation detail in the HTML" point of view. Is there not a way of
    > doing this through CSS alone, without having to stick filler into the
    > HTML? Or is this just a hack I'll have to live with?


    A DIV /can/ be used for this purpose. It's not the most perfect way, but
    it works, and it has as little semantic disturbance as I can think of.
    CSS as of today is far from perfect, so until CSS3 or maybe even CSS4 is
    completed (not to mention implemented), this is probably a hack that
    must be lived with. Sadly.
    Phoenix, Dec 26, 2004
    #10
  11. Oli Filth

    Phoenix Guest

    Henry wrote:
    > Oli Filth wrote:
    >
    >
    > Check this one.
    >


    <snip>

    That was some nasty old-skool HTML. On top of everything, it didn't
    validate, AND you are missing the point here, as the image isn't floated
    at all. (See the subject of the original post)
    Phoenix, Dec 26, 2004
    #11
  12. Oli Filth

    Phoenix Guest

    Phoenix wrote:

    > I, of course (heh) figured out a way to fix it in Opera at least. It's
    > not the DIV causing the trouble at all, it's actually the P that comes
    > before it. Which means that if you try this:
    >
    > CSS
    > ===
    >
    > DIV.story P { margin-bottom: 0; }
    >
    > The extra "line" disappears in Opera. (You can also remove everything on
    > the DIV.boxend, except for the "clear: both". They are irrelevant. ;)
    >


    I forgot to mention that this solution is really pointless if you have
    more than one paragraph, since the space between paragraphs will
    disappear this way. Therefore, you will either have to use margin-top to
    get the space, with :first-child to remove it from the first paragraph
    (a solution which is not going to work in IE), or you must give your
    last paragraph a class or id, so you can remove the margin-bottom on it
    with CSS through that method. A little hacky, that as well, but it'll
    work. And not be semantically messed up, at least.
    Phoenix, Dec 26, 2004
    #12
  13. Oli Filth

    Henry Guest

    Phoenix wrote:
    > Henry wrote:
    >
    >> Oli Filth wrote:
    >>
    >>
    >> Check this one.
    >>

    >
    > <snip>
    >
    > That was some nasty old-skool HTML. On top of everything, it didn't
    > validate, AND you are missing the point here, as the image isn't floated
    > at all. (See the subject of the original post)



    Try this one. Works and does validate. I hate css! The simplest task
    leads to a disaster!

    ;)

    -------------------------------------------------------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html><head><title>Floating IMG inside DIV problem</title>

    <style type="text/css">

    body
    {
    background-color: #FFF;
    padding: 12px;
    margin: 0;
    font-family: Verdana, Sans-Serif;
    font-size: 100%;
    }



    p {margin: 10px;}
    div#box {display: block; margin: 0px auto; width: 95%; border: solid 1px
    #C2A6FF; background: #F2FFFF; text-align: center;}
    img#bad {float: left;}
    </style></head>
    <body>

    <h1>Floating IMG inside DIV problem</h1>
    <p>
    In the example below, the yellow DIV contains both the text and the
    image. The image
    is floated to the left. However, this means that as you increase the
    browser width,
    the DIV only stretches down as far as the end of the text. Bummer.
    </p>

    <div id="box">

    <img id="bad" src="smile.gif" width="256" height="266"alt="pic">
    <p>Lorem
    ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
    <p>&nbsp;</p>
    <p>Lorem
    ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
    </div>
    <br>
    <div align="center">And here all seems to be all right</div>

    </body>
    </html>
    Henry, Dec 26, 2004
    #13
  14. Oli Filth

    Phoenix Guest

    Henry wrote:

    > Try this one. Works and does validate. I hate css! The simplest task
    > leads to a disaster!
    >
    > ;)


    I'm sorry, but it doesn't work. Once I make the text shorter than the
    height of the image (which also is part of the point here...) your
    example certainly stops working the way Oli wants. Be sure to test what
    you say before you tell people it works. (And I'm not trying to sound
    superior or something, it's just that.. you're not right. :p)
    Phoenix, Dec 26, 2004
    #14
  15. Oli Filth

    Richard Guest

    Oli Filth wrote:

    > Hello.


    > I'm creating a DIV to hold a short article and an associated image, and
    > I want the image on the left.


    > See http://olifilth.co.uk/test4.htm for an example.


    > However, with this set-up (as you can see in the example if your browser
    > window is wide enough), the containing DIV only stretches down as far as
    > the end of the text, not the end of the image.


    > How would one do this properly, so that the DIV graphically contains
    > everything, regardless of whether the image or the text is "higher",
    > using proper CSS layout rather than tables?


    > TIA,
    > Oli


    Simple solution, make your main division a tad higher than the image, or
    resize the image to fit.
    You'd be better off with two a colum affair.
    Float the divisions, not the image.
    Use a container division for both and define a height for it.

    Without a defined height, the image will fit where it needs to.
    Richard, Dec 26, 2004
    #15
  16. Oli Filth

    Richard Guest

    Henry wrote:

    > Oli Filth wrote:



    > Check this one.


    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html><head><title>Floating IMG inside DIV problem</title>



    My tried and trued method is this:

    #container { height:400px; width:400px;}
    #box1 { width:150px; float:left;}
    #box2 {width:250px;}

    <div id="container">
    <div id="box1">
    <img src="smiley.gif">
    </div>
    <div id="box2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.
    </div>
    </div>

    The inner divisions do not break when the window is resized.
    If need be, define a paragraph element for the text.
    Richard, Dec 26, 2004
    #16
  17. Oli Filth

    Henry Guest

    Phoenix wrote:
    > Henry wrote:
    >
    >> Try this one. Works and does validate. I hate css! The simplest task
    >> leads to a disaster!
    >>
    >> ;)

    >
    >
    > I'm sorry, but it doesn't work. Once I make the text shorter than the
    > height of the image (which also is part of the point here...) your
    > example certainly stops working the way Oli wants. Be sure to test what
    > you say before you tell people it works. (And I'm not trying to sound
    > superior or something, it's just that.. you're not right. :p)



    So... show me what DOES work, OK?

    I would like to learn seomething USEFUL.


    ;-)
    Henry, Dec 26, 2004
    #17
  18. Oli Filth

    Oli Filth Guest

    Phoenix wrote:
    > Phoenix wrote:
    >
    > > I, of course (heh) figured out a way to fix it in Opera at least. It's

    >
    >> not the DIV causing the trouble at all, it's actually the P that comes
    >> before it. Which means that if you try this:
    >>
    >> CSS
    >> ===
    >>
    >> DIV.story P { margin-bottom: 0; }
    >>
    >> The extra "line" disappears in Opera. (You can also remove everything
    >> on the DIV.boxend, except for the "clear: both". They are irrelevant. ;)
    >>

    >
    > I forgot to mention that this solution is really pointless if you have
    > more than one paragraph, since the space between paragraphs will
    > disappear this way. Therefore, you will either have to use margin-top to
    > get the space, with :first-child to remove it from the first paragraph
    > (a solution which is not going to work in IE), or you must give your
    > last paragraph a class or id, so you can remove the margin-bottom on it
    > with CSS through that method. A little hacky, that as well, but it'll
    > work. And not be semantically messed up, at least.


    Just tried it with multiple paragraphs, it actually works fine, without
    resorting to hacky stuff! As long as paragraphs have a non-zero
    margin-top, then the inter-paragraph space will not disappear.

    Thanks very much for all your help, I've made progress at last :).

    Oli
    Oli Filth, Dec 26, 2004
    #18
  19. Oli Filth

    Duende Guest

    While sitting in a puddle Richard scribbled in the mud:

    > Simple solution,


    Steal a site like Richard the Stupid.

    --
    D?
    If it ain't broken fix it anyway.
    Duende, Dec 26, 2004
    #19
  20. Oli Filth

    Henry Guest

    Oli Filth wrote:
    > Hello.
    >
    > I'm creating a DIV to hold a short article and an associated image, and
    > I want the image on the left.
    >
    > See http://olifilth.co.uk/test4.htm for an example.
    >
    > However, with this set-up (as you can see in the example if your browser
    > window is wide enough), the containing DIV only stretches down as far as
    > the end of the text, not the end of the image.
    >
    > How would one do this properly, so that the DIV graphically contains
    > everything, regardless of whether the image or the text is "higher",
    > using proper CSS layout rather than tables?
    >
    > TIA,
    > Oli



    One week and no one knows, huh?

    It's possible, but what price you have to pay and how many tricks you
    have to do to make it happening?

    When everything fails, use faithful tables.

    Works perfectly in every browser and validates. :)

    You can do magic with tables and a moderate use of css.

    The mix is the answer for FAST, efficient and cross browsing compatible
    web design.

    Time is money! Pure css is a waste a *lot* of time.

    The best css' pure pages are...css soup, multiply css's with hacks for
    compatibilities.

    KISS...

    BTW. Of course you can further use css to make that table... ummm...
    more modern, but... again...

    KISS

    -------------------------------------------------------------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>

    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 6.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    <style>
    <!--
    p {margin: 12px;}

    img#bad {float: left; padding: 12px;}

    -->
    </style>
    </head>

    <body>

    <div align="center">
    <table border="0" width="70%" cellspacing="1" cellpadding="0"
    bgcolor="#C0C0C0">
    <tr>
    <td bgcolor="#FFFFFF" valign="top" align="left">&nbsp;<p align="center">
    <img id="bad" src="smile.gif" width="256" height="266"alt="pic">
    Lorem
    ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.Lorem
    ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.Lorem
    ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>
    </td>
    </tr>
    </table>
    </div>

    </body>

    </html>
    Henry, Jan 1, 2005
    #20
    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:
    507
    Steve C. Orr [MVP, MCSD]
    Apr 27, 2005
  2. Tamlyn Rhodes
    Replies:
    3
    Views:
    973
    Andy Dingley
    Feb 26, 2004
  3. Philipp Lenssen

    Problem: <img></img>

    Philipp Lenssen, Jun 27, 2005, in forum: XML
    Replies:
    15
    Views:
    757
    David Håsäther
    Jul 3, 2005
  4. Jopek
    Replies:
    7
    Views:
    400
    dorayme
    Apr 26, 2009
  5. Replies:
    7
    Views:
    177
    Tad McClellan
    Jun 22, 2006
Loading...

Share This Page