scherpenzeel Posted May 31, 2006 Share Posted May 31, 2006 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 More sharing options...
real_illusions Posted May 31, 2006 Share Posted May 31, 2006 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 More sharing options...
scherpenzeel Posted May 31, 2006 Author Share Posted May 31, 2006 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.<{POST_SNAPBACK}> 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 More sharing options...
real_illusions Posted June 1, 2006 Share Posted June 1, 2006 add the footer as part of the content box i guess.i'm sure theres cleverer ways round this, but that one is simple. Link to comment Share on other sites More sharing options...
scherpenzeel Posted June 1, 2006 Author Share Posted June 1, 2006 Hi I think I have solved it.. changed the height of the #inhoud from 400px to auto that seems to work.. thanks for your suport ps if you have some additional advise to improve please drop it here.Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now