simple image + text CSS layout question

Discussion in 'HTML' started by Ciaran, May 4, 2007.

  1. Ciaran

    Ciaran Guest

    Hi does anyone know how to set the bottom margin of a left floated
    image to match the height of it's container? For example:

    <div style="width:200px; background-color:#CCCCCC">
    <img src="image.jpg" style="margin-right:20px; width:65px; float:left"/
    >

    long text long text long text long text long text long text long text
    long text long text long text long text long text long text long text
    long text
    </div>

    This example displays a simple image and text. I want the text to stop
    wrapping beneath the image once the text clears the bottom of the
    image. I want it to stay in line all the way down regardless of the
    amount of text. Obviously it's easy with tables but what's the css
    alternative?

    Cheers,
    Ciarán
     
    Ciaran, May 4, 2007
    #1
    1. Advertising

  2. Ciaran

    dorayme Guest

    In article
    <>,
    Ciaran <> wrote:

    > Hi does anyone know how to set the bottom margin of a left floated
    > image to match the height of it's container? For example:
    >
    > <div style="width:200px; background-color:#CCCCCC">
    > <img src="image.jpg" style="margin-right:20px; width:65px; float:left"/
    > >

    > long text long text long text long text long text long text long text
    > long text long text long text long text long text long text long text
    > long text
    > </div>
    >
    > This example displays a simple image and text. I want the text to stop
    > wrapping beneath the image once the text clears the bottom of the
    > image. I want it to stay in line all the way down regardless of the
    > amount of text. Obviously it's easy with tables but what's the css
    > alternative?
    >
    > Cheers,
    > Ciarán


    What you can do is float a div left, specify it to contain the
    img etc, and have another div alongside of it with a left margin
    equal or a little bit greater than the width of the floated div.
    If you have text in this second div, it will be go down the page
    without wrapping under the pic. If you want a demo, you post a
    url first with an attempt.

    --
    dorayme
     
    dorayme, May 4, 2007
    #2
    1. Advertising

  3. Ciaran wrote:
    > Hi does anyone know how to set the bottom margin of a left floated
    > image to match the height of it's container? For example:
    >
    > <div style="width:200px; background-color:#CCCCCC">
    > <img src="image.jpg" style="margin-right:20px; width:65px; float:left"/
    > long text long text long text long text long text long text long text
    > long text long text long text long text long text long text long text
    > long text
    > </div>
    >
    > This example displays a simple image and text. I want the text to stop
    > wrapping beneath the image once the text clears the bottom of the
    > image. I want it to stay in line all the way down regardless of the
    > amount of text. Obviously it's easy with tables but what's the css
    > alternative?


    Need another DIV

    <div style="width:200px; background-color:#CCCCCC;">
    <img src="image.jpg" style="width: 65px; float: left;">
    <!-- set margin = width of image + right margin on image -->
    <div style="margin-left: 85px;">
    long text long text long text long text long text long text
    long text long text long text long text long text long text
    long text long text long text
    </div>
    </div>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, May 4, 2007
    #3
  4. Ciaran

    Ciaran Guest

    On May 4, 2:56 am, "Jonathan N. Little" <> wrote:
    > Ciaran wrote:
    > > Hi does anyone know how to set the bottom margin of a left floated
    > > image to match the height of it's container? For example:

    >
    > > <div style="width:200px; background-color:#CCCCCC">
    > > <img src="image.jpg" style="margin-right:20px; width:65px; float:left"/
    > > long text long text long text long text long text long text long text
    > > long text long text long text long text long text long text long text
    > > long text
    > > </div>

    >
    > > This example displays a simple image and text. I want the text to stop
    > > wrapping beneath the image once the text clears the bottom of the
    > > image. I want it to stay in line all the way down regardless of the
    > > amount of text. Obviously it's easy with tables but what's the css
    > > alternative?

    >
    > Need another DIV
    >
    > <div style="width:200px; background-color:#CCCCCC;">
    > <img src="image.jpg" style="width: 65px; float: left;">
    > <!-- set margin = width of image + right margin on image -->
    > <div style="margin-left: 85px;">
    > long text long text long text long text long text long text
    > long text long text long text long text long text long text
    > long text long text long text
    > </div>
    > </div>
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com- Hide quoted text -
    >
    > - Show quoted text -



    Ah right! Very clever! Thank you both!
     
    Ciaran, May 4, 2007
    #4
  5. Ciaran

    BootNic Guest

    > Jonathan N. Little <> wrote:
    > news: 47989$463a925f$40cba7aa$
    > Ciaran wrote:

    [snip]
    >
    > Need another DIV
    >
    > <div style="width:200px; background-color:#CCCCCC;">


    It may be a good thing to set overflow:hidden; for times when
    the text height may be shorter then the image.

    <div style="width:200px; background-color:#CCCCCC;
    overflow:hidden;">

    > <img src="image.jpg" style="width: 65px; float: left;">
    > <!-- set margin = width of image + right margin on image -->
    > <div style="margin-left: 85px;">
    > long text long text long text long text long text long text
    > long text long text long text long text long text long text
    > long text long text long text
    > </div>
    > </div>


    --
    BootNic Saturday, May 05, 2007 11:30 AM

    A person without a sense of humor is like a wagon without springs,
    jolted by every pebble in the road.
    *Henry Ward Beecher*
     
    BootNic, May 5, 2007
    #5
  6. Ciaran

    Neredbojias Guest

    On Fri, 04 May 2007 11:35:15 GMT Ciaran scribed:

    >> Need another DIV
    >>

    > Ah right! Very clever! Thank you both!
    >


    Why don't you use just 1 div, position it relative, set left padding equal
    to the width of the image plus buffer, and absolutely position the image in
    the upper left corner?

    --
    Neredbojias
    He who laughs last sounds like an idiot.
     
    Neredbojias, May 6, 2007
    #6
  7. Neredbojias wrote:
    > On Fri, 04 May 2007 11:35:15 GMT Ciaran scribed:
    >
    >>> Need another DIV
    >>>

    >> Ah right! Very clever! Thank you both!
    >>

    >
    > Why don't you use just 1 div, position it relative, set left padding equal
    > to the width of the image plus buffer, and absolutely position the image in
    > the upper left corner?
    >


    Could work. Better actually, no need extra element.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, May 6, 2007
    #7
  8. Ciaran

    Neredbojias Guest

    On Sun, 06 May 2007 05:34:17 GMT Jonathan N. Little scribed:

    >> Why don't you use just 1 div, position it relative, set left padding
    >> equal to the width of the image plus buffer, and absolutely position
    >> the image in the upper left corner?
    >>

    >
    > Could work. Better actually, no need extra element.


    Haven't dallied with that particular procedure in a bit. IE 6 could be a
    prob, but there's conditional comments...

    --
    Neredbojias
    He who laughs last sounds like an idiot.
     
    Neredbojias, May 7, 2007
    #8
  9. Neredbojias wrote:
    > On Sun, 06 May 2007 05:34:17 GMT Jonathan N. Little scribed:
    >
    >>> Why don't you use just 1 div, position it relative, set left padding
    >>> equal to the width of the image plus buffer, and absolutely position
    >>> the image in the upper left corner?
    >>>

    >> Could work. Better actually, no need extra element.

    >
    > Haven't dallied with that particular procedure in a bit. IE 6 could be a
    > prob, but there's conditional comments...
    >

    No, seems to work just fine. Even 5.5 5.01 AND 4.01!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, May 7, 2007
    #9
    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. Eric
    Replies:
    4
    Views:
    734
    clintonG
    Dec 24, 2004
  2. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,014
  3. Replies:
    1
    Views:
    587
    John Timney \(MVP\)
    Jun 19, 2006
  4. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,019
    Wÿrm
    Jun 20, 2006
  5. Replies:
    29
    Views:
    885
    Ben C
    Mar 21, 2008
Loading...

Share This Page