Footer positioning problems

HTML & CSS
1

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 to anyone who helps me figure it out

2

Without having a look at any of your HTML. I can tell that you have alot of problems going on within your CSS. I cleaned up your CSS and made comments about the styles you have developed.

/* CSS Document */
@charset “utf-8”;

body { background-color: #369; } /* background:#369; */

#header {
position: absolute;/* Erase all of this absolute positioning. There’s no need for it. Float your element include a set width and position the element with margin/padding./
left: 0px;
top: 0px;
width: 850px;
height: 150px;
z-index: 1;
background-color: #FFF;/ background:#fff; /
font-family: “Times New Roman”, Times, serif;/ Apply to body /
text-align: left;
font-size: x-large;/ Apply to body /
font-style: italic;/ Apply to body*/
color: #C30; }

#header a {
    color: #ffffff; 
    text-decoration: none;
    font-weight: bold;
    font-family: Verdana;
    font-size: 14px; } /* styling looks decent */

    #header a:visited { /* When applying pseeudo classes within your CSS, the proper way to develop them is by having a:link, a:visited, a:hover, a:active. 
        color: #FFF;
        text-decoration: none;
        font-weight: bold; }

    #header a:hover {
        color: #cc0000;
        text-decoration: none;
        font-weight: bold; }
                        */

.HorizLinks {/* float element include a width /
position: absolute;
top: 115px;
left: 0px;
width: 850px;
background-color: #FF9900; }/ background:#FF9900; */

.HorizLinks ul { margin: 0px; } /* I would include a with on the UL */

.HorizLinks li {
    margin: 0px 55px 0px 50px;
    list-style-type: none;
    display: inline; }

#master {
width: 850px;
margin-top: 0px;/* Get rid of all of those margins. I doubt that you need them./
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;/ I take it you were trying to center this element? margin:0 auto; /
position: relative;/ Get rid of /
left: 0px;/ Get rid of /
top: 0px;/ Get rid of /
background-color: #333333; }/ background:#333333; */

Content {
position: absolute;/* float your elements /
left: 0px;/ get rid of /
top: 150px;/ get rid of /
width: 850px;/ keep /
height: 460px;
z-index: 2;/ get rid of /
background-color: #FFFFFF; }/ background:#ffffff; */

#footer {
position: absolute;/* float your element /
left: 0px;/ get rid of /
top: 590px;/ get rid of /
width: 850px;/ get rid of /
height: 20px;/ get rid of /
z-index: 3;/ get rid of /
background-color: #666; }/ background:#666; */

#one {
background-color: #FFF;/* background:#ffffff; */
font-size: 13px; }

#two {
background-color: #FFF;/* background:#ffffff; */
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; }

3

Hi, the main problem is that everything is absolteuly positioned!!! Why do you have everything like that? It shouldn’t be used for layouts and the structure of a page, but for smaller effects.

4

changing the height for content div to “auto” and removing positioning did the trick…thank u guys

5

Glad it worked :).