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 blah blah text etc blah blah blahl

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.

Btw, some web browsers have plugins to help you with this today. A tip if you are using Firefox is to download the Firebug addon. You can then inspect the elements in your html and change its css styles on the fly. I know Google Chrome and Opera have similar tools. — Patrick, Mar 06 '10 at 18:42
the problem stems from the fact that the divs are positioned absolute, inside a container, that container does not expand when the internal content expands have tried position relative but this seems to not be liked either, i think i will have to use a float, i dont usually like to use floats but i think it is the only solution to get positioned elements to expand there containers. — davethecoder, Mar 06 '10 at 18:42
@minus4 you can't have a container expand to the size of an absolutely positioned child container I'm afraid. The absolute positioning takes the element completely out of the flow, it can't be used to "push" other things any more. — Pekka, Mar 06 '10 at 18:46
@minus4 no need to get snarky at people giving hints - how are they supposed to know what you know, and what you don't. — Pekka, Mar 06 '10 at 18:56
thats not snarky pekka thats called humour what your doing is smarky by turning it into something melicouse, anyway on subject think it is solved.. left div is relative ( auto height), right div is absolute footer bar is relative but needed a fix of top = height of footer to make it drop the value of itself — davethecoder, Mar 06 '10 at 19:09
-1 for vague question and general rudeness to everyone trying to help you out. — , Mar 06 '10 at 19:14

score 2 · Answer 1 · answered Mar 06 '10 at 18:36

2

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.

answered Mar 06 '10 at 18:36

Pekka

442,112
142
972
1,088

yes thanks for the tutorial i get what they do, there is a wrapper around that it is positioned relative, then i got div positioned inside of that, however when added content it wont expand the container even when set to relative or having other relative content inside. i set the footerbar to relative hoping that no matter what the height, it would always fall relative to the contents bottom – davethecoder Mar 06 '10 at 18:45
@minus4 aah, if your problem is that `iceabtside` won't expand then it's different, then you're looking for a `clearfix`. Search for "clearfix" on SO – Pekka Mar 06 '10 at 18:47
@minus4 http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best – Pekka Mar 06 '10 at 18:48

score 1 · Accepted Answer · answered Mar 06 '10 at 18:52

1

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.

answered Mar 06 '10 at 18:52

Patrick

17,669
6
70
85

animuson · Answer 3 · 2010-03-06T18:43:21.937

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.

having trouble position relative when before is a height auto

3 Answers3