having trouble position relative when before is a height auto

Question

i have a div that i use as a container to fit in footer stuff

#footcompatible { width:985px; height:50px; display:block; position:relative; left:0; top:0;  <--- FIXED changed to top = 50px (the height) and added bottom -50px}

here is some HTML on the master page:

<asp:ContentPlaceHolder ID="MainContent" runat="server" />              
    <div id="footcompatible">
    <div class="footerbarsTop"><!-- insert footer bar --></div>
    <div id="footerblock"><%Html.RenderPartial(ViewData["footer"].ToString()); %></div>     
    <div class="footerbarsBot"><!-- insert footer bar --></div>
    </div>

the contentplaceholder gets replaced with content from my page for example:

expanding content

<div class="iceabtside"> 
<div class="aboutpic"><!--about --></div>
<div class="sidetext">
    <span class="redtext">
    blah blah text etc
    </span>
    <span>
    blah blah blahl
    </span>
</div>

and the aboves css:

.iceabtside {display:block; width:271px; height:auto; position:absolute; left:697px;      top:0; border:0px solid white; text-align:left;}
 also this is what i missed of on my initial paste 
.iceabtfm 
{
    display:block; width:661px; height:auto; position:relative; left:24px; top:0;    text-align:left;
 }

the footer block i wish to come after this but what i actually get is it being half way down the page instead and over the content, the more content i add never matters it just stays where it seems to have mad a home for itself, i cant position absolute as i never know the hight of the content above! if i remove the positioning it just to the top of the content, very strange and is battering my head a bit now.

thanks

Answer 1

I am having trouble understanding your description. Can you rephrase, or make an online example or sketch?

Anway, two basic rules:

• position: absolute is relative to the body or to the next ancestor element with either position: absolute or relative set. So in your example, anything inside footCompatible with position set to absolute will take the top left corner of footCompatible as the starting point (left = 0, top = 0) and not the whole document. There is no way around this except to take the element out of the relatively positioned element.

• Position: absolute takes an element out of the document's flow, kind of makes it float above all other elements (not to confuse with the float property, that's soemthing different.) It's impossible to have a position: absolute element push a succeeding footer element further down, depending on its height. You would have to embed the footer in the element, or take a different approach.

Answer 2

Well, a relative position sets the position of the element so many pixels relative to the position it is originally assigned in the document. Setting top and left both to 0 will not move the element at all. If you set top to 10, for example, it will move the element down 10 pixels from the position it was assigned. Or if you set right to 50, it will move the element left 50 pixels from that position. Note that a relatively positioned element will not cause any elements around it to relocate, it will simply overlap anything similar to an absolutely positioned element.

Your 'iceabtside' class seems to be worthless. First off, you don't need to declare a division as a block because that's what it is by default, and declaring a height as auto is default as well, it will automatically adjust the height based on the content inside it. It seems like what you need to do is get rid of all the positioning stuff and just set margins on it to put it in the middle of the page or whatever you're trying to do. That way the footer element will come after all the content like you want it too.

Answer 3

In your .iceabtside css class you define the position to be absolute. The footer div hence doesn't "know" where the iceabtside div is and positions it after its former relative div, even if your iceabtside div is in the same place.