Expanding div moving other div

[AdRock]

Hello

I have a div (#content) which is used to display all the content. This div should be able to expand depending on how much content is in there. That isn't the problem.

I also have another div (#bottom) which is used for links and copyright information.

What i want to do is if the content div is very long, the bottom div is moved so that it directly underneath the content div at all times.

I am having trouble becuase the bottom div doesn't move and the content div is underneath

Here is the CSS i used:

#content {
width: 545px;
z-index: 1;
position: absolute;
padding: 5px;
top: 180px;
left: 220px;
overflow: visible;
border: none;
}

#bottom {
width: 545px;
height: 18px;
position: absolute;
background-color: #ffffff;
top: 800px;
left: 220px;
text-align: center;
}

If anyone could help it would help me out no end!!

[ukgeoff]

Your problem is because you have used

Code: Select all

position: absolute;

This styling instruction takes the element out of the natural flow and 'pins' it at a precise location, with respect to its containing element.

Give your 'content' div a

Code: Select all

position: relative;

Dont give it top and left values unless you have to tweak its location.

If the 'bottom' div is the next element after the 'content', then give that a

Code: Select all

position: relative;

also. It will then move down as the 'content' expands.

There may be issues that need to be addressed based on other styling code you have but you get the idea.

[AdRock]

I think i got it now.....many thanks for the quick reply

[AdRock]

That works a treat but I have a couple more questions.....

1. Can the content div have a minimum height so if there isn't much content the bottom div still stays at the bottom of the page?

2. I have a navigation div next to the content div. Can I set it so the navigation div is exactly the same height of the content div so it's level at the bottom?

Any help is greatly appreciated

Adam

[ukgeoff]

Yes you can. The css code is:

Code: Select all

min-height: 400px;

The only problem is the this doesn't work in IE, at least it is supposed to in IE 7 which is still in Beta, but it doesn't in earlier versions.

Try having the following sequence of css inplace.

Code: Select all

height: navheightpx;
overflow: visible;