SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot kevinritt's Avatar
    Join Date
    Nov 2002
    Location
    Lynn, Massachusetts-United States
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    floating image and text side by side

    Can someone look at this and see what I'm doing wrong? I want the imgage on the left with the heading/ text to the right and lined up without the space. Is it a dsiplay issue? It's the section that says Resources

    Thanks for any help

  2. #2
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let's try this: you have a div with id = cat-box-heading (and the heading in it), and then AFTER the div you have the text that you want to push up next to the image - what if you place the text INSIDE that same div, together with the heading. You may just have to adjust the div's width, margins etc. accordingly. Also, I notice that the appearance differs in IE9 and Chrome.

  3. #3
    SitePoint Zealot kevinritt's Avatar
    Join Date
    Nov 2002
    Location
    Lynn, Massachusetts-United States
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed the heading to h3 tags (thought there might be an issue there) Everything seems to be set up correctly:
    I wrapped the image, heading and paragraph in a div then floated the image left, floated the h3 and p to the left as well. Still can't close the gap between the heading and paragraph. :{

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

    I'm not sure how much closer you want the text but you have 4px padding top on the p element.
    Code:
    cat-box p {
        color: #706B5B;
        font-family: Arial,Helvetica,sans-serif;
        font-size: 13px;
        line-height: 22px;
        margin-left: 145px;
        padding: 4px;
    }
    Remove that padding-top if that's what you were talking about.
    padding:0 4px 4px;

  5. #5
    SitePoint Zealot kevinritt's Avatar
    Join Date
    Nov 2002
    Location
    Lynn, Massachusetts-United States
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    I'm not sure how much closer you want the text but you have 4px padding top on the p element.
    Code:
    cat-box p {
        color: #706B5B;
        font-family: Arial,Helvetica,sans-serif;
        font-size: 13px;
        line-height: 22px;
        margin-left: 145px;
        padding: 4px;
    }
    Remove that padding-top if that's what you were talking about.
    padding:0 4px 4px;
    I figured out the problem. I had the p styled with a float: left - that was throwing things off
    Thanks for the help


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
  •