Expanding div moving other div

AdRock · #1 Jul 14th, 2006, 22:29

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 · #2 Jul 14th, 2006, 22:44

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 · #3 Jul 14th, 2006, 23:28

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

AdRock · #4 Jul 15th, 2006, 11:21

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 · #5 Jul 15th, 2006, 11:43

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;

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Expanding Divs.. Need Help :(	FXDesigns	Web Page Design	10	Jan 30th, 2008 16:06
Div not expanding down	Lchad	Web Page Design	5	Feb 13th, 2007 20:37
DIV expanding too far	Echilon	Web Page Design	2	Dec 31st, 2006 16:39
expanding menu	brunette	JavaScript Forum	3	Dec 7th, 2006 23:56

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Expanding div moving other div