Grow your CSS skills. Land your dream job.

Position a Floated Div/Image

  • # July 20, 2009 at 10:52 am

    Is it possible to push a floated div so the text wraps both sides of an div/image.

    Ex: This is what my image currently looks like:

    IMAGE Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
    HERE orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

    Ex: This is what I want (without using align="left"
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
    IMAGE orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit HERE vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

    # July 20, 2009 at 2:26 pm

    are "IMAGE" and "HERE" separate items? Can you draw a picture of what you’d like to achieve? It looks like you simply want to float "IMAGE" left and "HERE" right.

    # July 20, 2009 at 2:47 pm

    As far as I am aware it’s not possible. The only way I can see of doing it would be to place the image inline, so if you want it for anything other than a completely static page it’s not really practical.

    # July 20, 2009 at 3:03 pm

    Sorry….IMAGE HERE was mean to represent a single image that would span multiple lines.

    # July 20, 2009 at 4:15 pm

    A single image cannot be broken up into multiple items.

    # July 20, 2009 at 4:53 pm

    Maybe I’m not being clear enough (or my picture is just bad)…I want a floated image to have text around the top and bottom, rather than just having text wrap under and to the side.

    Does that make sense?

    # July 20, 2009 at 5:09 pm

    You’ll need to show an example I think.

    # July 20, 2009 at 6:20 pm

    Do you mean to have an image floating in the middle of your paragraph (not up against either side of the div) with the text floating all around it? If so, then no – someone might correct me here, but I don’t see how that would be possible.

    On second thoughts, while I’m typing, it MIGHT be possible to get the same effect through a workaround – you could achieve a blank space in your paragraph by using inline spans of ‘whatever’ width, then absolutely position an image into the space created…just a thought…

    If the image is up against, say, the left side (or right), and you just want to position it lower down in your text block, then just place the img tag in your HTML in the line of text at which you want the top of your image to begin. The previous text lines will flow as normal above it, the affected lines (depending on the height of your image) will flow to the right and the paragraph will resume normal line length beneath it…

    # July 21, 2009 at 4:48 am

    Apparently I’m the only person that can see my first post so I’ll say it again. The only way to do that is to put the image inline.

    # July 21, 2009 at 11:18 am
    "apostrophe" wrote:
    Apparently I’m the only person that can see my first post so I’ll say it again. The only way to do that is to put the image inline.

    I know what you’re saying, but I’m not 100% sure that’s what he’s after. Maybe it is, but something about that diagram he used makes me feel like it isn’t.

    # July 21, 2009 at 11:46 am
    Quote:
    I know what you’re saying, but I’m not 100% sure that’s what he’s after. Maybe it is, but something about that diagram he used makes me feel like it isn’t.

    The way I understand the diagram is that if you draw a box around the words IMAGE HERE, that would represent the image and what he wants to do with it.

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

You must be logged in to reply to this topic.

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