Grow your CSS skills. Land your dream job.

Paragraph border not wrapping floated image

  • # December 1, 2009 at 9:02 pm

    Hi all. I’m having a problem with a border style I’ve applied to a paragraph and an image that is floated next to the paragraph. For some reason I get awfully confused with floats, block elements and inline elements. I have uploaded a sample page to http://www.mosaik.com.au/borderIssue.html where I’ve just grabbed the necessary code from my development page. I’m also including the same code below:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


    jamesGodbold

    James Godbold

    PGA Professional

    {profileDetails}


    The text of the paragraph wraps perfectly around the image but the border continues right under the image. I would like the border to start in line with the text "PGA Professional". I’m sure this is a simple issue to remedy but I’m just not seeing it right now (must be the lack of sleep!!).

    Thanks in advance.

    # December 2, 2009 at 12:17 am

    In line 62 you should add left margin to the p.position class listed below. I think the best way to do this would be to change the markup a bit. something like what I have listed below may work better.

    Code:
    #container {width:500px; height:200px;}
    #img-container {float:left; width:100px; height:100px;}
    #copy-container {float:left; width:400px; height: /*enter height/;}

    Code:
    .bodyContainer p.position {
    border-bottom:1px dashed #4E7561;
    color:#5B7928;
    font-size:0.6em;
    margin:0 20px 25px 139px;
    padding-bottom:10px;
    }

    something like that..

    # December 2, 2009 at 8:58 am

    Thanks for your help, the second solution does work for the sample I provided. Of course I left some information off my post (you’re supposed to be able to read my mind, right? :) ) The content in the box is dynamic and a number of the boxes will be appearing on the one page. Some of the boxes will have an image and some may not, so simply changing the margin means it will look great if there is an image but won’t look so good if there isn’t. Sorry, kinda crucial piece of information I forgot to mention!

    I guess I could somehow pass the information from the database that if there is an image add padding to the .position class but that’s a little beyond me – I’ll have to ask the forums for my CMS about that!

    I’ve tried your first solution but, because there will be an image sometimes and not others, I can’t specify the width of the image and copy containers. Also, I can’t specify a height as the image and copy size will vary. I tried putting width:auto for .copyContainer but then that container moves below the floated image. Also the .bodyContainer collapses. If I use overflow:hidden or add a clearing div this fixes the .bodyContainer but the .copyContainer is still below the .imgContainer because of the width:auto!

    Starting to wish I hadn’t designed the site this way! Any thoughts? Maybe I should just tell the client they *have* to have an image?!

    # December 2, 2009 at 6:02 pm

    If this is the case I would use a default image as a bg of the img div if there is no image. It does not make sense to me how the site would look consistent without an image. I would definitely consider restructuring your html as I provided above for cross browser support as well as not needing an image. Hope that makes sense, If you revise your code I would be happy to take a look.

    # December 3, 2009 at 12:07 am

    Okay, thanks again. I’ve got your suggested type of styling elsewhere in the site so I’ll just run with that. And I’ll make sure there is an image included with each team profile too. Thanks for your help!

    # December 3, 2009 at 2:00 am

    Here is a reference. I just happened to have to do something like this today. Please don’t be so critical of the code. Its a rush / hack job.

    http://newagemarketinggroup.com/sell-sheets.html

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".