Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Issues with wrapping text around image

    I have a content region that I would like to have an image in the left upper corner and the text to wrap around it.

    ------------- texttextexttext
    | image image | texttexttextte
    | image image | texttexttextte
    | image image | texttexttexttex
    | image image | texttexcttexct
    -------------- texttexttexttex
    this is more text more text etc

    So you get the idea. I have the text starting where I want and the image where I want but I can't get them to overlap each other where one another has the 'free space'. Do this make sense? Have a look at the link below.
    http://www.chiropracticcares.com/newSite/aboutUs.html

    -Brian
    Last edited by rmedek; 09-11-2007 at 10:36 PM. Reason: Title

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Add a class to the image and float it left. You might want to add some margin to the class also.

    Code:
    .image-left {
    float: left;
    margin-right: 8px;
    }
    .
    .

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that worked great! Now I have this space between the top section and bottom. Not sure why I can't get rid of it...

    New Link:

    http://www.chiropracticcares.com/newSite/aboutUs.html

    CSS:

    /* Column Two - Alternate */

    #col-two-alternate {
    float: left;
    width: 760px;
    }

    #col-two-alternate .boxed {
    margin-bottom: 10px;
    }

    #col-two-alternate .boxed .title {
    height: 20px;
    padding: 10px 0 0 10px;
    background: url(images/img07.gif) no-repeat;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    color: #FFFFFF;
    }

    #col-two-alternate .boxed .content {
    padding: 19px 150px 0 19px;
    background: #E5ECED url(images/img08.gif) no-repeat;
    border: 1px solid #528489;
    border-top: none;
    }

    #col-two-alternate .boxed .images-left {
    float: left;
    margin-right: 10 px;
    padding: 19px 0 0 19px;

    }

    #col-two-alternate .boxed .imagesContent {
    padding: 19px 19px 0 235px;
    background: #E5ECED url(images/img08.gif) no-repeat;
    border: 1px solid #528489;
    border-top: none;
    border-bottom: none;
    }


    #col-two-alternate .boxed blockquote {
    background: #E5ECED url(images/img08.gif) repeat-x;
    }


    Thanks a bunch for any help!

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    try this:
    Code:
    #col-two-alternate .boxed .imagesContent {
    	padding: 19px 19px 1px 235px;
    	background: #E5ECED url(images/img08.gif) no-repeat;
    	border: 1px solid #528489;
    	border-top: none;
    	border-bottom: none;
    }
    Don't know why, but it removes the white band.

  • #5
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there a way to remove that space now between the two text sections?

    btw, thanks for the help!

  • #6
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    I'll have another look. might need to scoop the file again.

    *edit*
    You can either reduce the margin-bottom in the first rule, or add a specific value in the p rule as follows. Your choice.
    p, blockquote, ul, ol {
    margin-bottom: 2em;
    line-height: 1.6em;
    }

    p {
    margin-bottom: 10px;
    }
    Last edited by jlhaslip; 09-12-2007 at 04:29 AM.


  •  

    Posting Permissions

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