www.webdeveloper.com
Results 1 to 5 of 5

Thread: What's wrong with this code?

  1. #1
    Join Date
    Dec 2002
    Location
    New Jersey
    Posts
    139

    Question What's wrong with this code?

    <div style="clear:both;">
    <img src="images\robrtliv.jpg" height="200" width="184" alt="Robert relaxing" style="float:right;">
    <img src="images\danliv.jpg" height="200" width="184" alt="Daniel relaxing" style="float:right;">
    </div>

    I'd like both pics on the right side. One on top of the other.

    For example

    Pic1
    Pic2

    Thank you very much!

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    Floating any element does a couple things:

    1) It removes it from the block-level element flow, meaning it doesn't take up space in what ever block-level element contains it. That DIV has a zero pixel height because both images are floated. But line elements, like text, <span>, <b>, <em>, etc. - and any other tag with display: inline; as one of its style rules, will flow around the edges of floated elements.

    2) All floated elements become block-level by default, even floating a <span> tag makes it a block element.

    3) Floated elements exist side-by-side unless there isn't enough room or the clear property is applied.

    What you really want to do is not float the images, just align the text in that DIV to the right. The <img> tag is inline by default and reacts to the text-align: property.

    Do you want text to flow around the images?

    In that case:
    Code:
    <div>
      <img ... style="clear: right; float: right;" />
      <img ... style="clear: right; float: right;" />
      <p>Some text goes here, yada yada yada.</p>
    </div>

  3. #3
    Join Date
    Dec 2002
    Location
    New Jersey
    Posts
    139
    Thank you very much. Didn't need the text but that is good to know. Again many thanks!

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    You could also style them to display:block; within that div since the float doesn't seem to be doing anything special.

  5. #5
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    Originally posted by ray326
    You could also style them to display:block; within that div since the float doesn't seem to be doing anything special.
    That would work great if Robert_R knows how big the images' containing block is. Then he can set the images' displays to block and give them a left margin to push the images over toward the right, which is what he is looking for.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles