relative position creates blank space

[BroChris]

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?

[Vladdy]

Are you using CSS compliant browser to view your page???

[BroChris]

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.

[Vladdy]

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

[BrainJar]

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:

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:

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.

[BroChris]

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!

[Maurizio1230]

I've the same problem on my site:

<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)

[drhowarddrfine]

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.