"left floated" paragraphs and images using CSS?

Discussion in 'HTML' started by jersie0, Nov 23, 2003.

  1. jersie0

    jersie0 Guest

    I am trying to lay out an area of a page with a left justified
    paragraph, followed by one or more images with captions under them,
    and possibly more paragraphs. These images or paragraphs would
    continue to the right edge of the window, then wrap under and begin
    anew, left to right.

    To implement this, I have set up the following:

    <head>
    <STYLE TYPE="text/css">
    .left80 { text-align: left; width: 80% }
    .left25 { text-align: left; width: 25% }
    .leftimg { float: left; padding: 3px; border: 0 }
    .rightimg { float: right; padding: 3px; border: 0 }
    div.captioned { float: left }
    div.captioned p { text-align: center; }
    </style>
    </head>

    <body>

    <div class="left25">
    <p>The text of a paragraph that I would like to continue for 25% of
    the window, then wrap. This paragraph could go on and on...</p>
    </div>

    <div class="captioned">
    <p>
    <img alt="img1" src="img1.jpg"><br>
    Image 1 caption
    </p>
    </div>

    <div class="captioned">
    <p>
    <img alt="img2" src="img2.jpg"><br>
    Image 2 caption
    </p>
    </div>

    <div class="captioned">
    <p>
    <img alt="img3" src="img3.jpg"><br>
    Image 3 caption
    </p>
    </div>

    +++++

    The images seem to work great - they float left until the right edge
    of the window is reached, then neatly drop to the next line, so to
    speak and continue right.

    However, I want img1 to be lined up with the opening paragraph (that
    is, the top of img1 lines up with the top of the text of the
    paragraph). And no matter what I try, img1 always winds up on the
    left margin, instead of to the right of the first paragraph.

    What am I doing wrong, and is there a better css way than I'm using to
    implement this?
     
    jersie0, Nov 23, 2003
    #1
    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. Hardeep Rakhra
    Replies:
    10
    Views:
    697
    Hardeep Rakhra
    Feb 19, 2004
  2. Jeff
    Replies:
    3
    Views:
    9,225
    kleinbaas
    Apr 13, 2010
  3. Replies:
    2
    Views:
    348
    Jim Moe
    Dec 5, 2006
  4. Replies:
    0
    Views:
    284
  5. kylin
    Replies:
    1
    Views:
    603
    Chris Rebert
    Nov 4, 2009
Loading...

Share This Page