Using "top" does not expand parent div

[AndrewH]

Hi guys, I'm having a frustrating problem with my site right now. I'm using a parent div to wrap my content, so that a footer div is correctly positioned at the bottom of the page, BUT also is pushed down when the content grows larger than the browser window.

The problem is, if I use absolute positioning on the child divs, the child divs are taken out of the flow and the parent div no longer wraps around them (therefore allowing the footer to collide and move over the content if the window shrinks or the content expands.

So I changed my child divs to be relative, but now when I position them in the page using "top: xxx" the parent div does not expand to wrap all the way around them (it just stays the original size).

Is there a solution to this that does not involve JS? I've tested this problem in both IE and FF and they both dislay similarly.

Thanks!

[Siddan]

I haven´t really began to sunk my teeth into this as it seems too complicated for my design...

but have a look at this link, which I found in one topic in here...
http://www.quasi-ke.servebeer.com/design/index.aspx

it is very nice and tidy and I surely can learn alot from it. There it involves margins and footer and everything

[David Harrison]

Originally posted by AndrewH
So I changed my child divs to be relative, but now when I position them in the page using "top: xxx" the parent div does not expand to wrap all the way around them (it just stays the original size).I think that the problem here is that you are not properly understanding how relative positioning works.

As Siddan hinted, try using margins to position your elements instead. Here is some information about how positioning works, specifically relative positioning:http://www.w3.org/TR/CSS21/visuren.html#choose-position
relative
    The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

[schomer]

It's hard to guess what is happening for you, without seeing it.

If the wrapper div box isn't extending down around all the content that is inside it, one way to make sure it extends down is to add another div at the bottom of the wrapper div. Most call this a "spacer" div.

.spacer {clear:both}

Putting in <div class="spacer"></div> right before the end of your wrapper div will make sure the bottom of the div box gets down around everything inside it.

For example:

<div id="wrapper">
<div id="sidebar"></div>
<div id="main"></div>
<div class="spacer"></div>
</div>
<div id="footer"></div>

I guess you could also put the footer inside the wrapper, if you had the spacer, like this:

<div id="wrapper">
<div id="sidebar"></div>
<div id="main"></div>
<div class="spacer"></div>
<div id="footer"></div>
</div>


Schomer

[AndrewH]

Thanks guys! I needed to switch all the divs to relative and use margin-top, not "top," to position them. It's working beautifully now!

Unfortunately for these kinds of problems I can't actually show you guys, since I'm starting a new company and it's all hush hush :D . Thanks for the help!