Grow your CSS skills. Land your dream job.

image question

  • # November 9, 2009 at 1:13 pm

    Here is the page I’m working on.
    http://www.plansponsor.com/Topics.aspx?id=4294967381

    I apologize ahead of time for the lousiness of this site. I was merely hired to come in and "fix" some stuff.

    Scroll down a bit to the part with the four boxes in a grid and look at the bottom left box with the heading "Talking Points Podcast".
    The designer I’m working with is concerned with the fact that there is "too much space" between the image of the girl and the text.

    She wants to be able to put images with a variety of sizes in any of these boxes while maintaining the same margin between the image on the left and the text to the right (like in the boxes above).
    In the current css the images are floated left and the text is floated right.

    Is there a way to achieve what she wants? Essentially the ability to plug in new images of any size (especially smaller ones) while maintaining a close margin between the image and the text?

    I appreciate any input anyone might be able to provide. :)

    # November 9, 2009 at 1:48 pm

    Remove:

    Width and float:right from the <p> tag.

    Add:

    Padding-left:10px to the <p> tag.

    Change:

    Float:left to float:right on the <img>.

    That is what I would do.

    # November 9, 2009 at 1:55 pm

    The best I can come up with is to remove the right-padding from the images so you are left with:

    Code:
    div#content-info-boxes img {
    float:left;
    padding-left:10px;
    }

    Then float the paragraphs also to the left and give them the 10px left-padding:

    Code:
    div#content-info-boxes p {
    float:left;
    font-size:12px;
    line-height:15px;
    margin:0;
    padding:0 10px;
    width:95px;
    }

    That will solve the text against the img problem but it does leave the text quite a long way from the opposing edge of its containing box. The only way I see around that is to give that specific box p its own width:

    Code:
    div#content-info-box-3 p {
    width:120px;
    }
    # November 9, 2009 at 4:04 pm

    Thank you both for the suggestions.
    I ended up floating both the img and the p to the left and adding some left padding to the p. It does create a bit of space to the right of the text but, hey, when you’re forced to adhere to a two-column layout such things might be unavoidable, no?

    Thanks again! :mrgreen:

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

You must be logged in to reply to this topic.

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