Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Paragraph border not wrapping floated image

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #27019
    Mosaik
    Member

    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:



    Test Border

    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.

    #67381
    Nert
    Member

    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..

    #67391
    Mosaik
    Member

    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?!

    #67412
    Nert
    Member

    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.

    #67410
    Mosaik
    Member

    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!

    #67420
    Nert
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.