1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

css: relative position white space problem

Discussion in 'CSS' started by phpmania, Jul 28, 2008.

  1. #1
    Hi all
    Relative positioning is always going to leave an empty space equal in size to the element that was moved from its position!
    Is there a way to remove that blank space?
    SEMrush
     
    phpmania, Jul 28, 2008 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,480
    Likes Received:
    1,920
    Best Answers:
    247
    Trophy Points:
    515
    #2
    It's not so much that it leaves a blank space, as the 'rendering box' is moved in relationship to it's 'flow box'. I'd have to see your code, but if you aren't repositioning the element too far it may be you should be using negative margins instead.
     
    deathshadow, Jul 28, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I must be wrong in this because every book says differently, but as far as I'm concerned, moving something with relative positioning doesn't move the box at all, only a "picture" of the box. That's why the "space" is still there-- the damn box is still there. Still there and still pushing the other boxes out of the way with it's margins or whatever it had. The visual representation of the box that you moved can't push anyone out of the way. It's just a picture that sits over everything, no better than taping some paper to the monitor.

    Am I just short-bus confused on this, ds, or is this what you mean with your float and render boxes? Render box just being a picture of the actual box, who holds all the margins etc? I've been calling it The Real Box and The Visual Representation of The Box.

    Why I never position stuff with relative positioning.
     
    Stomme poes, Jul 29, 2008 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,480
    Likes Received:
    1,920
    Best Answers:
    247
    Trophy Points:
    515
    #4
    Kind of. I say Flow box because it's the box that effects document flow. I call the other one the render box because it is what is rendered on the screen.

    Margins and position:relative (with top/left/right/bottom) change the size and placement of the "flow box" in relationship to the "render box". Width and padding change the size of both. Absolute positioning deletes the 'flow box' outright.

    For example, you put margin-left:-100px on a width:200px div, the 'render box' would still be 200px wide, but the flow box would only be 100px wide with the render box hanging over the flow box by 100px to the left.

    At least, that's how I think of it. I find once I think of them as two separate sets of numbers dealing with positioning and margins is a LOT simpler.
     
    deathshadow, Jul 29, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yeah oops that was a typo float-flow.

    I guess that also helps my Ocean Explanation-- the concrete block at the bottom and the thin metal plate sitting on top. Only it sucks as an explanation when it comes to inlines : ) I guess they're just fish.
     
    Stomme poes, Jul 29, 2008 IP
  6. phpmania

    phpmania Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Wow
    Thanks all
    Yes, work well
    This problem fix by add margin-bottom: -value;
    margin-bottom: -100px;
     
    phpmania, Jul 29, 2008 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    That will cover up the problem, but what DS meant my using margins was moving the box with the margins instead of the
    position: relative;
    left: whatever;
    top: whatever;

    Using margins to push your box around is just safer. I assume if you are moving the bottom margin up, that you had moved you box up with relative positioning?

    Try removing position: relative and instead using

    margin-top: -100px;


    Although that's quite a distance to be moving a box, so the whole set-up you have might be screwy... but anyway, so long as whatever works you understand WHY it's doing what it's doing.
     
    Stomme poes, Jul 29, 2008 IP