Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Louisville, KY
    Posts
    279
    Thanks
    0
    Thanked 0 Times in 0 Posts

    relative position creates blank space

    Whenever I try using css for relative positioning of an object, I'm left with a large area of blank space where the object would have been if I had not re-positioned it. Is there any way of getting rid of this space other than repositioning everything else on the page relative to the moved objects?

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are you using CSS compliant browser to view your page???
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Louisville, KY
    Posts
    279
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I use IE 6. Maybe I didn't explain well enough. The object is repositioned just fine, but in addition to the moved object, there is blank space where it used to be that I don't want.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think that is the way it is meant to be. Relative positioning takes the element from where it woud be if the position was static and shifts it by top and left values. It does not affect the position of the neighbour elements.
    See the CSS standard for details:
    http://www.w3.org/TR/REC-CSS2/visuren.html#comparison

    If you explain what kind of layout you are trying to achive I may be able to help you
    Last edited by Vladdy; 07-04-2002 at 04:46 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    185
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's the correct behaviour for relative positioning. If you just want to set a reference point, you can use a absolutly positioned element inside a relatively positioned element. For example:

    Code:
    Other Content Other Content Other Content Other Content
    <div style="color:#c0c0c0;position:relative;">
    	<b>Sample Text</b>
    	<div style="color:#000000;position:absolute;left:2px;top:-1px;">
    		<b>Sample Text</b>
    	</div>
    </div>
    Other Content Other Content Other Content Other Content
    This produces a kind of shadow effect on the text "Sample Text."

    The first "Sample Text" div is relatively positioned but with left and top values of (0,0) so it appears where it normally would. Because it is a positioned element, it establishes a new containing block for any positioned elements within it.

    The inner div is absolutely positioned at (2,-1) but this is measured from the top-left corner of the outer div, it's containing block.

    So, if you add or remove content around the outer, relatively positioned div, it will move accordingly. The inner, absolutely positioned div will also move - following it's containing block. For example, try adding several lines of text to the above to move it down the page:

    Code:
    Other Content Other Content Other Content Other Content<br>
    Other Content Other Content Other Content Other Content<br>
    Other Content Other Content Other Content Other Content<br>
    Other Content Other Content Other Content Other Content
    <div style="color:#c0c0c0;position:relative;">
    ...
    Both "Sample Text" divs will move down the page the same amount.
    Last edited by BrainJar; 07-04-2002 at 08:43 PM.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Louisville, KY
    Posts
    279
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You read my mind, Brainjar. That was exactly what I was trying to do: create a shadow effect. Thank you very much, it looks great.

    Css is awesome. I can't believe I've been designing for 6 years and just now am starting to learn it!

  • #7
    New Coder
    Join Date
    Jun 2009
    Posts
    49
    Thanks
    7
    Thanked 1 Time in 1 Post
    I've the same problem on my site:
    Code:
    <img src="/front/images/home/curl_center.png" alt="" style="width:883px; height:49px; position:relative;" />
    <div style="background: url(front/images/home/curl_left.png) no-repeat; position:relative; top:-49px; left:-17px" />
    <div style="background: url(front/images/home/curl_right.png) no-repeat; position:relative; top:0px; left:900px;" />
    I've this big blank region

    I tried to use BrainJar's idea but it doens't work.
    You can check it on http://hostinvent.com (user:test; pass:test)

  • #8
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Using position:relative means the element can be moved from its original location but the original location is preserved. That is how it's supposed to work.

    btw, that's a 7-year old thread.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •