Jump to content
rootKID

how to place div at bottom if it wont? Oo...

Recommended Posts

Hey w3s again, im currently trying to make a foot div for a green webshop (for fun). Anyhow, im using this code:

#foot {  width:950px;  height:20px;  color:#FFF;  background-color:#90CA77;   bottom: 0px;}

what i am trying to, is go take the whole foot div down to the bottom, but it will not do it. Any ideas? Oo...it is working so far, but wont go down, and that is all i need it to. here is the rest of my CSS:

img {border: none;}a img {  border: none;}html, body {height: 100%; /*to fill it out with no white borders or weird remain space...*/margin: 0em;padding: 0em;background-color: #D0D6B8;}#wrapper {width: 950px;margin: 0 auto;background-color: #ECEEE1; top: 0px;bottom: 0px;height: 100%;}#logo_holder {  width: 950px; /*or 100%*/  height: 85px;  background-color:#595959;} #menu_holder {  width: 940px; /*Original: 950px, minus 10 for 5px at left and right (padding)...*/  height: 20px;  background-color:#90CA77;   padding-left: 5px;  padding-right: 5px;  border: none;}   /* unvisited link */  #menu_holder a:link {   color:#FFF;   text-decoration:none;  }  /* visited link */  #menu_holder a:visited {   color:#FFF;   text-decoration:none;  }   /* mouse over link */  #menu_holder a:hover {   color:#FFF;   text-decoration:none;  }  /* selected link (clicking on it with mouse)... */  #menu_holder a:active {   color:#FFF;   text-decoration:none;  }#foot {  width:950px;  height:20px;  color:#FFF;  background-color:#90CA77;   bottom: 0px;}

Edited by rootKID

Share this post


Link to post
Share on other sites

left: right: etc properties will NOT work unless position: (not static, i might add) is used. Sticky footer:Footer is placed below content container, with - top margin of the height of footer, the content container should be min-height: 100%; so it will fill the total height of browser window by defualt unless content extend beyond this, and a bottom padding is used to allow for the footer overlap when - top margin is used. requires no positioning usage at all, which is a really bad, bad, bad, bad, oh wait! did i mention it was a bad idea to use position.

Share this post


Link to post
Share on other sites

hmm, ok... so how would you fix again? hehe x)... and yes, was kind of easy not to oversee the word ''bad'' for position x)...

Share this post


Link to post
Share on other sites
#wrapper {width: 950px;margin: 0 auto;background-color: #ECEEE1; /*top: 0px;bottom: 0px; bad bad bad removed by dsonesuk*/ /* height: 100%;removed by dsonesuk*/min-height: 100%; /* added by dsonesuk*/padding-bottom: 20px; /*  added by dsonesuk, same height as foot which will prevent text going under foot */}#foot {  width:950px;  height:20px;  color:#FFF;  background-color:#90CA77; margin: 0 auto; /* added by dsonesuk*/margin-top: -20px /*  added by dsonesuk, same height as foot, will draw its bottom edge up to bottom edge of #wrapper which should be at bottom edge of screen by default until content inside #wrapper extends beyond screen height*//*bottom: 0px; bad bad bad removed by dsonesuk*/}

everything else, header, nav, must be iINSIDE the #wrapper container. with only the #foot on the outside.

Share this post


Link to post
Share on other sites

hmm, thanks, will test later! :). And sorry for late reply, was to my danish oral exam today... god heaven it went ok, not the best, but okay :). English Oral tomorrow, and DONE for august... yay x)...

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...