OK try this:

1) Create a basic html doc like this as your test page:

<div id="container">
   <div id="header">Your header goes here</div>
   <div id="body">Your body contents goes here</div>
   <div id="bottom_section">Your bottom_section text goes here</div>
</div>

2) Now use the following in your css file or whatever method you use to style 
your page:

<style media="screen" type="text/css">
html,
body {
   margin:0;
   padding:0;
   border: 0;
   height:100%;
   background: #dddac7;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#bottom_section {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the bottom_section */
   background:#6cf;
   border-top: 2px red solid;
}
</style>

3) you need to tidy up your page so that all styles appear in one place and 
your html becomes clean, tidy and simple.  Even table styles can be separate 
from table contents!

hth

--- On Sun, 6/6/10, bho...@aol.com <bho...@aol.com> wrote:


> Hi.  I'm creating a nested DIV
> page (one column) and I'm encountering  a 
> problem.  I would like the paragraph named
> "bottom_section" to go to  the 
> bottom of the page, regardless of the users screen
> resolution.  Right  now, the 
> way it is, everything is in order, but the "bottom_section"
> doesn't  reach 
> the bottom of the screen.  I created another DIV
> called "add_space"  figuring 
> I can somehow make it be a buffer between the
> paragraph  named 
> "general_text" and "bottom_section."  I'd like
> "add_space" to  fill whatever empty space 
> is available on the page, and in the process, stretch 
> the DIVs named 
> "main_content" and "inner_content," and push 
> "bottom_section" to the bottom of 
> the screen.
>  
> I'm posting a stripped down version of the code.  Any
> help is greatly  
> appreciated.
> Thanks.
> bhomis
>  



      
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to