SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Adding Margins After Floating Image

    How do you apply a margin against an image that has been floated? It seems that the margin get's measured from the edge of the parent div, not from the edge of the image.

    Look at this:



    <body>

    <img style="float: left" src="some-button.png"/>

    <div style="margin-left: 25px" />Trying to add some distance from image.</div>

    </body>

    Basically I want the text to be 25 pixels to the right of the image. (Right now my work-around is to measure the width of the image and then add 25px to that to create the distance I want.)

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Yeah, this is normal actually: if you have a floated whatever, and then a static block next to it, the static block is actually sliding under the floating whatever, as if the float weren't there at all!
    You can see this if you give the static block a background colour.

    Internet Explorer does not do this IF the static block has Haslayout triggered on it (if the static block was given a height or a width usually, tho there are other triggers). Then it incorrectly treats the static block like another float! And its left side will be right up against the float instead of up against the left side of the container. You can see this on the floaties pages, if you look in a modern browser and then IE6 or 7.

    The inline content of the static block gets out of the way though. Inlines can see floats. If the float has the margin, then it should be able to push the text over further.

    But more importantly, your code is invalid.
    An image is an inline and may not be a direct child of the body (body is one of those blocks who need their direct children to also be blocks).

    So you can solve two problems in one by putting the img inside the div.
    <div>
    <img />
    <p>Textitty text text text.</p>
    </div>

    and then again you'd want to put the margins on the image. Though top margins might collapse, making them look like you've put a top margin on the div itself; if so, use top-padding on the div instead of top margins on the image (assuming you want a nice amount of space all the way around the image, not just its right side).

    I can't remember but I've also run into an instance where margins on the image still didn't work, and I keep forgetting how I got them to work.

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

    As Stomme said above you would usually apply the margins on the floated element and that will force the following content away from it.

    Here is an old example that shows that method plus another method for stopping the text from wrapping.

  4. #4
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. I'm now applying the margin to the image and it's doing what I want.


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
  •