footer positioning problem

i am pastin my css for u to look at... my problem is i have a header, content and footer parts....so when i am adding stuff in the content div, the div expands and the footer stays right there overlappin with the div content...how do i make the footer flexible so that it moves along with the div when i add stuff to the content div....


@charset "utf-8";
/* CSS Document */

body {
background-color: #369;
}

#header {

position:absolute;
left:0px;
top:0px;
width:850px;
height:150px;
z-index:1;
background-color: #FFF;
font-family: "Times New Roman", Times, serif;
text-align: left;
font-size: x-large;
font-style: italic;
color: #C30;
}

#header a {

color: #ffffff;
text-decoration: none;
font-weight: bold;
font-family: Verdana;
font-size: 14px;

}

#header a:visited {
color: #FFF;
text-decoration: none;
font-weight: bold;
}

#header a:hover {

color: #cc0000;
text-decoration: none;
font-weight: bold;

}


.HorizLinks {
position: absolute;
top: 115px;
left: 0px;
width: 850px;
background-color: #FF9900;

}
.HorizLinks ul {

margin: 0px;

}



.HorizLinks li {

margin: 0px 55px 0px 50px;
list-style-type: none;
display: inline;

}


#master {

width: 850px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
left: 0px;
top: 0px;
background-color: #333333;

}
#content {
position:absolute;
left:0px;
top:150px;
width:850px;
height:460px;
z-index:2;
background-color: #FFFFFF;
}
#footer {
position:absolute;
left:0px;
top:590px;
width:850px;
height:20px;
z-index:3;
background-color: #666;
}
#one {
background-color: #FFF;
font-size: 13px;
}
#two {
background-color: #FFF;
text-align: left;
}
.news {
font-weight: bold;
}
.newclient {
font-weight: bold;
}
#master #content #two table tr td strong {
text-align: right;
}
#master #content #two table tr td p {
font-size: 13px;
}


thanx

With your absolute positioning, you will run into that issue. I'd suggest using another form of positioning.

Looking further into your CSS, you have div's overlapping everywhere. Is this a project, or an assignment?

With your absolute positioning, you will run into that issue. I'd suggest using another form of positioning.

Looking further into your CSS, you have div's overlapping everywhere. Is this a project, or an assignment?


an assignment.....i have div's overlappin coz i saw a video on youtube and followed that.....what shud i do to avoid overlappin divs.....

I'd start with changing your positioning. If you do need to have absolute, then remember your sizes and positions.

IF:
#header is-
left:0
top:0
height:150
width:850

Then to get the content to display below it
#content is-
left:0
top:150
height:460
width:850

The footer would need to be
#footer
left:0
top:610
height:20
width:850

Almost every element you put into the content, can overflow. Unless you set the overflow property, it will break your content div. Keeping that in mind, every time you expand your content (add height), you'll need to reset the top position of your footer.

IE:
if you re-size content to equal 470, then you'll need to ad those 10 pixels worth to the 'top' value of your footer, top:620.

easiest way is to get rid of absolute positioning. let the page automatically re-adjust to suit its content.

bazz

changing the height for content div to "auto" and removing positioning did the trick....thank u guys