SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    floating a block level element around an image

    Hi everyone!

    I have a div, and I want to wrap text around it - no problem, just float the div to the right, the text wraps. However, within that <p> tag, I now need to add a <h2> element. My h2 elements are block-level (display:block) so that the h2 is underlined all the way across the screen. However my h2 doesnt wrap properly - it continues to extend THROUGH the div, while the text itself wraps. I want the underline (currently width:auto) to STOP at the div, as if it were wrapping (so that the 75% below is 75% of the allotted space - since the div is on that line, 75% there would be less than 75% below the div). Any ideas?

    .myDiv { float: right; width: 100px; }
    .myP { font-size: 12px; font-family:verdana, arial; }

    h2 { display: block; width: 75%; border-bottom: 1px solid black; }

    thanks,

    will

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Floats are removed from the flow but they will repel foreground elements such as text. However they have no impact on backgrounds and borders which will slide underneath the float as if thwe float wasn't there.

    Usually you can disguise this fact by giving a background colour to the float and hiding whatever goes underneath. However thuis may not always be possible especially when the float has a margin and the background appears on the other side of the float.

    You could place the h2 and text in a div that has a margin-right set to clear the float and then it will all steer clear of the float but it won't wrap underneath the image when the text is below the image.

    e.g. the second example here shows that behaviour (narrow the screen).
    http://www.pmob.co.uk/temp/caption3.htm

    If you want the text to wrap normally then your options are limited. There is an undocumented feature discovered by me that will allow IE, firefox and opera to steer clear of the float but I can't guarantee that this is the default or expected behaviour so use at your own risk.

    The technique works by first giving the element you want to wrap "layout" for ie. This can be done with the height:1% hack.

    For mozilla and opera you need to use overflow:auto which has the same effect for them.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #outer{width:500px;}
    .myDiv { float: right; width: 100px;height:100px;border:1px solid red;margin:10px; }
    .myP { font-size: 12px; font-family:verdana, arial; }
    h2 { display: block; overflow:auto; border-bottom: 1px solid black; }
    /* mac hide \*/
    * html h2 {height:1%}
    /* end hide*/
    </style>
    </head>
    <body>
    <div id="outer">
     <div class="myDiv">
      <p>Float Right</p>
     </div>
     <h2>This is a heading with text that needs to wrap around an image etc.</h2>
    </div>
    </body>
    </html>
    Hope its of some use

  3. #3
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks for the response paul!

    I was able to get it work in firefox and IE, but safari still shows the underline going all the way across. I used overflow: auto for the h2. SO CLOSE!

    I tried giving a background color to the floated div, but the underline STILL went under it. I even tested with the color - making background-color pink and the blue line still went through it. Frustrating to say the least - I might have to rethink the layout entirely if I cant get the h2 bottom border to wrap around the floated div the way I need it to...

    I appreciate your response

    will


    Quote Originally Posted by Paul O'B
    Hi,

    Floats are removed from the flow but they will repel foreground elements such as text. However they have no impact on backgrounds and borders which will slide underneath the float as if thwe float wasn't there.

    Usually you can disguise this fact by giving a background colour to the float and hiding whatever goes underneath. However thuis may not always be possible especially when the float has a margin and the background appears on the other side of the float.

    You could place the h2 and text in a div that has a margin-right set to clear the float and then it will all steer clear of the float but it won't wrap underneath the image when the text is below the image.

    e.g. the second example here shows that behaviour (narrow the screen).
    http://www.pmob.co.uk/temp/caption3.htm

    If you want the text to wrap normally then your options are limited. There is an undocumented feature discovered by me that will allow IE, firefox and opera to steer clear of the float but I can't guarantee that this is the default or expected behaviour so use at your own risk.

    The technique works by first giving the element you want to wrap "layout" for ie. This can be done with the height:1% hack.

    For mozilla and opera you need to use overflow:auto which has the same effect for them.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #outer{width:500px;}
    .myDiv { float: right; width: 100px;height:100px;border:1px solid red;margin:10px; }
    .myP { font-size: 12px; font-family:verdana, arial; }
    h2 { display: block; overflow:auto; border-bottom: 1px solid black; }
    /* mac hide \*/
    * html h2 {height:1%}
    /* end hide*/
    </style>
    </head>
    <body>
    <div id="outer">
     <div class="myDiv">
      <p>Float Right</p>
     </div>
     <h2>This is a heading with text that needs to wrap around an image etc.</h2>
    </div>
    </body>
    </html>
    Hope its of some use

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The demo I showed above seems to be working ok in all safari according to the browerscam shots.

    You may need to review your code or post the methods you are using so we can see if there is anything that can be done.


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
  •