Inline image and block text

Discussion in 'HTML' started by Rob, Feb 24, 2007.

  1. Rob

    Rob Guest

    Hi all,

    I've been attempting in vain for several days to do something that
    should be very simple: display a small image with text adjacent to it,
    but NOT wrapped underneath it. Here's a crude ASCII-art example of
    what I'm attempting to do:
    __
    |__| Here is a bunch of text that
    wraps, but not underneath
    the image at its left. I'd also
    like to make sure the image
    is centered (absmiddle) with
    the first line of this text.

    Anyone have a clue how to do this?
    Rob, Feb 24, 2007
    #1
    1. Advertising

  2. Rob wrote:
    > Hi all,
    >
    > I've been attempting in vain for several days to do something that
    > should be very simple: display a small image with text adjacent to it,
    > but NOT wrapped underneath it. Here's a crude ASCII-art example of
    > what I'm attempting to do:
    > __
    > |__| Here is a bunch of text that
    > wraps, but not underneath
    > the image at its left. I'd also
    > like to make sure the image
    > is centered (absmiddle) with
    > the first line of this text.
    >
    > Anyone have a clue how to do this?
    >




    Yeah, wrap image and text in DIV, float the image and set left margin of
    text = "width of image + margin" in this example 300 pixels.

    STYLE:
    /*
    want to clear floats do each image-text unit stays separate
    if IMG height > text, padding will adds space for following units
    */
    DIV.pixbox { clear: both; padding: .5em; }

    /*
    float IMG and clear any margins & padding - browser consistency
    */
    DIV.pixbox IMG { display: block; float: left; margin: 0; padding: 0; }

    /*
    set margin of P so left is IMG.width + desired.margin, also set bottom
    margin to allow more than one paragraph per 'image-text' unit
    */
    DIV.pixbox P { margin: 0 0 1.5em 310px; padding: 0; }



    HTML:

    <div class="pixbox">
    <img src="some.jpg" width="300" height="250" alt="my image">
    <p>
    Whatever your want to write about your picture ...
    </p>
    <-- add more paragraphs if needed -->
    </div>

    <-- Next image-text unit -->
    <div class="pixbox">
    <img src="someother.jpg"...


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 24, 2007
    #2
    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. Abhi
    Replies:
    2
    Views:
    723
    E. Robert Tisdale
    Jul 3, 2003
  2. Alvin
    Replies:
    7
    Views:
    463
    E. Robert Tisdale
    May 6, 2005
  3. morrell
    Replies:
    1
    Views:
    933
    roy axenov
    Oct 10, 2006
  4. Sean
    Replies:
    4
    Views:
    654
    Rolf Magnus
    Apr 30, 2006
  5. Rahul
    Replies:
    3
    Views:
    440
    James Kanze
    Feb 28, 2008
Loading...

Share This Page