Advanced Search

Results 1 to 10 of 10

Thread: image word wrap and horizontal lines

  1. #1
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,593
    Thanks
    71
    Thanked 80 Times in 78 Posts

    Default image word wrap and horizontal lines

    Hi.

    How can I put an image that is floated to the left in a div that takes up half the div and put in a horizontal line (this can be <hr> or a div with a border) and text and have the text wrap around the image and have the horizontal line take up 50% of the space between the image and the right side of the div and have the div centered?

    Here is what I have so far:

    <style type="text/css">
    .img{
    float:left;
    padding: 13px 13px 10px 13px;
    </style>
    <body><div style="width:50%;border: #000000 solid;float:left;"><img src="/images/a/kimura.jpg" class='ft' style="width:305px;width:305px;float:left; padding: 3px 3px 0px 3px;"></a>yadda yadda yadda yadda <hr style="text-align:center;width:75%;">yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda <div style="border-top: 1px #000000 solid;margin-top:4px;float:left;width:50%;"></div>yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda</div></body>
    To choose the lesser of two evils is still to choose evil. My personal site

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    27,637
    Thanks
    42
    Thanked 2,896 Times in 2,868 Posts
    Blog Entries
    12

    Default

    I'm not sure which division you want centered, try this:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <div style="width:50%;border: 2px solid #000;margin: 0 auto;"><img src="/images/a/kimura.jpg" alt="not here" class='ft' style="width:305px;height:305px;float:left; margin: 3px 3px 0px 3px; border: 1px solid red;"></a>yadda yadda yadda yadda <hr style="width: 25%; margin: 0 auto;">yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda<div style="clear:left;"></div></div></body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,593
    Thanks
    71
    Thanked 80 Times in 78 Posts

    Default

    Works great in all browsers except Opera. Do you think this is an issue with Opera? If the fault lies with Opera I am content with the code as is and will check things out on Opera's end. The problem is that with Opera the horizontal line overlaps the image.

    The div that I want centered is the horizontal line. This can be a division or a horizontal rule.
    To choose the lesser of two evils is still to choose evil. My personal site

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    27,637
    Thanks
    42
    Thanked 2,896 Times in 2,868 Posts
    Blog Entries
    12

    Default

    Ah, Opera. Not ideal, but I'm thinking you may be able to tweak it from here:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <div style="width:50%;border: 2px solid #000;margin: 0 auto;"><img src="/images/a/kimura.jpg" alt="not here" class='ft' style="width:305px;height:305px;float:left; margin: 3px 3px 0px 3px; border: 1px solid red;"></a>yadda yadda yadda yadda <hr style="width: 25%; margin: 0 12.5% 0 0;float:right;"><div style="clear:right;">yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda</div><div style="clear:left;"></div></div></body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,593
    Thanks
    71
    Thanked 80 Times in 78 Posts

    Default

    Maybe not ideal, but certainly a step in the right direction and it can work as a workaround at least. Do you think that the fault lies with Opera here? If so then I am quite happy with how things are.
    To choose the lesser of two evils is still to choose evil. My personal site

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    27,637
    Thanks
    42
    Thanked 2,896 Times in 2,868 Posts
    Blog Entries
    12

    Default

    Looks good using my first method in Chrome and Safari (already tested good in IE 8 and Firefox), so I guess Opera is the odd man out.

    Thing is though, with percentages you are always one way or another at the mercy of the user's screen/window size.

    I don't really do much designing. My idea of a really good design though is one where there are various elements of fixed dimensions that can float and/or flow about the page depending upon its size.

    Most of what you see though depends upon screen/window size too much and/or has a fixed overall width of about 800px. There are some creative headers that can sort of stretch without appearing to do so on larger screens/windows, while looking just fine on narrower ones.

    I'd start with something like that at the top, and have the content be as I stated - able to float and/or wrap beneath the header in various ways and still look good.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,593
    Thanks
    71
    Thanked 80 Times in 78 Posts

    Default

    I have a small page on my site where I keep track of some Opera browser bugs that I have run across. In Opera 12.50 build 1513 the Horizontal Rule issue was recently fixed. I'm rather excited about this one, because I have been waiting for it for a while now.

    Here is a direct link to my demo page where it now works. This works in the 12.50 1513 build, so it has not been released yet, but should be soon.

    I know the last post is just over 2 years old, but this thread seemed like the most appropriate place to post this.
    To choose the lesser of two evils is still to choose evil. My personal site

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    27,637
    Thanks
    42
    Thanked 2,896 Times in 2,868 Posts
    Blog Entries
    12

    Default

    As far as I can see, those rules aren't centered in any browser.

    To center a horizontal rule within its container, specify both of their widths and give the HR a left and right margin of auto.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    1,593
    Thanks
    71
    Thanked 80 Times in 78 Posts

    Default

    You're right . I updated the page a little and see that the stable version of Firefox and latest build of Opera look the same. They base the widths of the hr on the entire container and the margins on the container, but relative to the image.

    In the stable version of Opera the horizontal rule is placed relative to the container and ignores the position of the image. The hr is behind the image.

    In ie8 (I do not have access to ie9 or ie10) the width of the hr is based on the width of the container minus the space taken up by the width of the image.
    To choose the lesser of two evils is still to choose evil. My personal site

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    27,637
    Thanks
    42
    Thanked 2,896 Times in 2,868 Posts
    Blog Entries
    12

    Default

    If I'm following you correctly, this is something that's going to vary by browser. According to standards a floated image takes up no layout space. So if you float an image in the same container where you're also trying to center an HR using the method I outlined, the HR will be centered relative to the container without regard to the image. Older IE did, at least at times, give floated content some layout space, so it's unclear how that would affect things.

    All browsers should react well in this situation:

    Put the image in a separate div and make another separate div for the text and HR tags. Float both of these left within a container div. Set the width of the image div to that of the image, and the width of the text/HR div can probably be left unset as long as the width of the container is set. Now the method I outlined should work.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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