Jump to content

When stretching content box goes through footer


scherpenzeel

Recommended Posts

When I have more content in the content box it wil stretch and then in FF it goes through / under the footer. Since I want to use this content box for an weblog it must be able to become longer...:)How can I solve this? So the footer must go down as the contentbox stretches..this is where you can see the page in action:My Webpagethis is my css:

/* -------------------hoofdonderdelen------------------- *//* ------------------- Copyright Hocom @dvies 2006 ----- */* {	margin: 0px 0px;	padding: 0px 0px;	text-align: left;}html{	weight: 100%;	text-align: center;	background-color: #569313;	font-family: Geneva, Arial, Helvetica, sans-serif;	font-size: 1em;	color: #666600;	height: 100%;}   body{	font-family:Geneva, Arial, Helvetica, sans-serif;	color:#666600;	background-color: #569313;	margin-left: 0px;	margin-right: 0px;	text-align: left;	font-size: 1em;	height: 100%;}/* ------------------- standard links ------------------- */a{color:#003399;text-decoration:none;}a:hover{	color: #666600;	background-color: none;	text-decoration: underline;}/* ------------------- menu box boven ------------------- */#menu{	width:900px;	padding-top:0px;	padding-bottom:0px;	padding-left:0px;	background-color: #FFFFFF;	border-top-color: #ddd;	border-bottom-color: #ddd;	border-top-style: solid;	border-bottom-style: solid;	border-top-width: 0px;	border-bottom-width: 0px;	height: 30px;	padding: 0px;	padding-right: 0px;	margin: 0px;	margin-top: 0.6em;	margin-right:;	margin-bottom: 0px;	margin-left:;		}/* ------------------- menu boven lijst opmaak ------------------- #menu li a{	color: #666600;	text-decoration: none;	font-size: 90%;	padding: .2em .5em;	background-color: #E9FFD2;	text-transform: none;}#menu li a:hover{	color: #FFFFFF;	background-color: #666600;	text-decoration: none;}	#menu li a:active{color: #666600;	font-weight: bolder;}#menu ul{	width:900px;	padding:0;	margin:0;	list-style-type:none;	color: #003399;}#menu li{	display:inline;	color: #003399;}	*//* ------------------- opmaak met tabbladen  ------------------- *//* code voor de lijst*/#menu ul{	margin: 0;	padding: 4px 0; /* waarde die in IE nodig is */	border-bottom: 1px solid #ddd;	font-size: 85% }/* hack om IE-tekortkoming te omzeilen */html>body #menu ul{	padding: 3px 0; /* eigenlijk gewenste waarde */}#menu ul li{	display: inline;}#menu li a:hover{	color: #FFFFFF;	background-color: #666600;	text-decoration: none;}/* Het tabblad-achtige uiterlijk instellen */#menu li a{	padding: 0.2em 0.8em; 0.2em;	border: 1px solid #ddd;	list-style: none;	display: inline;	background-color: #FFFF00;	text-decoration: none;	color:#439816;	font-weight: 800;	font-style: italic;}/* de geselecteerde tab een afwijkend uiterlijk geven */#menu li a.selected{	border-bottom: 1px solid #fff;	background-color: #fff;}/* ------------------- de boxes ------------------- */#desite{	width:900px;	background-color: #FFFFFF;	margin: auto;	padding: auto;	height: auto;}#header{	width:900px;	background-repeat: no-repeat;	height: 150px;	background-image: url(/gras.jpg);	background-position: center;	border-bottom-color: #ddd;	border-top-color: #3C9924;	border-top-style: solid;	border-bottom-style: solid;	border-top-width: thin;	border-bottom-width: thin;	background-color: #E9FFD2;}.navigatie{	text-align:left;	background-color: #FFFFFF;	}#site{	height:100%;	width:900px;	text-align:left;	background-color: #FFFFFF;	margin-right: 0px;	margin-top: 0px;	float: left;	margin-bottom: 0px;	padding-top: 0px;	padding-right: 0px;	padding-bottom: 0px;	padding-left: 0px;	margin: 0;	padding: 0;}#inhoud{	height:400px;	width:70%;	text-align:left;	float:left;	background-color: #FFFFFF;	padding-top: 15px;	padding-left: 5px;	margin-top: 10px;	margin-right: 0px;	margin-bottom: 0px;	margin-left: 0px;	padding-right: 0px;	padding-bottom: 0px;}#rechts{	height:400px;	width:28%;	float:right;	background-color: #FFFFFF;	padding-left: 0px;	padding-bottom: 0px;	padding-top: 15px;	margin-bottom: 0px;	margin-left: 0px;	padding-right: 0px;	margin-right: 0px;	margin-top: 10px;}#linkerkant{	float:left;	width:30%;	background-color: #FFFFFF;	height: 100%;}#rechterkant{	float:right;	width:60%;	margin: 0;	margin-top: 0px;	margin-right: 10px;	margin-bottom: 0px;	margin-left: 0px;	padding: 0;	padding-bottom: 0px;	padding-right: 0px;	height: 100%;	background-color: #FFFFFF;}#info{	float:left;	width:100%;	background-color: #FFFFFF;}.nieuws{	width:100%;	border-top:2px;	background-color: #FFFFFF;	border-right-color: #439816;	border-bottom-color: #439816;	border-left-color: #439816;	border-right-style: solid;	border-bottom-style: solid;	border-left-style: solid;	border-right-width: 2px;	border-bottom-width: 2px;	border-left-width: 2px;	border-top-color: #439816;	border-top-style: solid;}.middentekst{	width:100%;	border:0px;	background-color: #FFFFFF;	float: right;	margin-top: 15px;	}.info{width:99%;border:0px solid #000000;border-top:0px;}.nieuws a{color:#003399;text-decoration:none;}.nieuws a:hover{	color:#FFFFFF;	text-decoration:none;	background-color: #FFCC33;}.titelhoofd{	text-align:left;	color:#7E8A58;	font-weight:bolder;	padding: 3px;	padding-left:10px;	text-transform: uppercase;	font-size: 90%;	font-style: italic;}.nieuwsbody{	text-align:left;	padding:5px;	font-size: 70%;	background-color: #FFFFFF;}.nieuwsbodykleur1{	text-align:left;	padding:5px;	font-size: 70%;	background-color: #FDEFB9;}.nieuwsbodykleur2 {    text-align:left;	padding:5px;	font-size: 70%;	background-color: #E2DBA9;}.infobody{	text-align:left;	background-color: #FFFFFF;	font-size: 70%;	padding-top: 5px;	padding-right: 5px;	padding-bottom: 5px;	padding-left: 5px;	width: 100%;}#footer{	width:900px;	background-color: #DEDFD7;	border-top-color: #CCCCCC;	height: 17px;	border-top-style: solid;	border-top-width: 1px;	valign: bottom;	padding-top: 3px;	margin-top: 10px;	padding-bottom: 3px;	float: left;	border-bottom-style: solid;	border-bottom-width: 1px;	border-bottom-color: #CCCCCC;	background-image: url(../afbeeldingen/carex_www.jpg);	background-repeat: no-repeat;	background-position: center;	clear: both;	color: #FFFFFF;}.footertekst {	color: #FFFFFF;	padding-left: 15px;	font-size: 70%;	float: left;}.footertekst_rechts {	color: #003399;	padding-right: 15px;	font-size: 70%;	float: right;	margin-right: 90px;	word-spacing: 2em;}.fotobody {	width:100%;	height: 119px;	float: right;}.fotosblokje_links {	width: 158px;	height: 119px;	float: left;	background-color: #FFFFFF;}.fotosblokje_rechts {	float: left;	width: 158px;	height: 119px;	background-color: #FFFFFF;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;	margin-left: 0px;	padding-top: 0px;	padding-right: 0px;	padding-bottom: 0px;	padding-left: 0px;}.topboxrechts {	width:99%;	background-color: #FFFFFF;	height: 119px;	float: left;	margin: 0;	padding-top: 0px;	padding-bottom: 0px;	padding-left: 0px;	padding-right: 0px;	padding: 0;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;	margin-left: 0px;}.logobox {	width:158px;	background-color: #FFFFFF;	float: left;	border-color: #CCCCCC;	border-top-style: solid;	border-right-style: solid;	border-bottom-style: solid;	border-left-style: solid;	border-top-width: 1px;	border-right-width: 1px;	border-bottom-width: 1px;	border-left-width: 1px;	color: #003399;	margin-top: 10px;	margin-right: 0px;	margin-left: 0px;	margin-bottom: 0px;	font-size: 70%;	font-weight: bold;	height: 119px;	padding-right: 5px;	background-repeat: no-repeat;}.fotobodyonder {	width:100%;	margin-bottom: 0px;	margin-left: 0px;	padding-bottom: 0px;	padding-right: 0px;	padding-left: 0px;	height: 272px;	visibility: hidden;	z-index: auto;}/* ------------------- opmaakelementen ------------------- */.fotorechts {	padding: 5px;	float: right}.fotolinks {	padding: 5px;	float: left}.titel {	text-align:left;	color:#7F795F;	font-weight:bolder;	padding: 3px;	padding-left:10px;	text-transform: uppercase;	font-size: 80%;	font-family: "Courier New", Courier, mono;}

Link to comment
Share on other sites

add this to the content div cssoverflow:auto;then, when the content goes below a specified height, a scrollbar will be created. leaving the footer intact.:)but your site looks fine in Firefox here.

Link to comment
Share on other sites

add this to the content div cssoverflow:auto;then, when the content goes below a specified height, a scrollbar will be created. leaving the footer intact.:)but your site looks fine in Firefox here.

Thanks for replying, tried it but its not the solution. I want the footer to move down with the stretching of the contentbox.. As it does now in IE.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...