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
<HTML>
<HEAD>
<style type="text/css">
div.whole_page{
width:100%;
height:100%;
margin-left: 0px;
margin-right: 0px;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
text-align:center;
vertical-align:top;
}
div.encase_with_background{
background-image:url(images/background_001.jpg);
width:900px;
height:100%;
margin-left:auto;
margin-right:auto;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
text-align:center;
vertical-align:top;
}
div.encase_logo_and_body{
margin-left:auto;
margin-right:auto;
width:890px;
height:100%;
padding-top:0px;
padding-bottom:0px;
padding-left:5px;
padding-right:5px;
text-align:center;
vertical-align:top;
margin: 0px;
}
div.main_content{
width:890px;
text-align:center;
vertical-align:top;
background-color:#fbfbfb;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
margin: 0px;
}
div.inner_content{
margin-left: auto;
margin-right: auto;
width:860px;
vertical-align:top;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
}
p.paragraph_titles{
font-size: 1.5em;
}
p.general_text{
font-size: .8em;
}
div.add_space{
width:860px;
}
p.bottom_section{
text-align:center;
}
</style>
</HEAD>
<BODY TOPMARGIN=0 BOTTOMMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0
BGCOLOR="#dddac7">
<DIV class="whole_page">
<DIV class="encase_with_background">
<DIV class="encase_logo_and_body">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=890
HEIGHT=169>
<TR>
<TD WIDTH=890 HEIGHT=4 BGCOLOR="#ad1a60"><IMG SRC="images/empty.gif"
HEIGHT=4 WIDTH=15 HSPACE=0 VSPACE=0></TD>
</TR>
<TR>
<TD WIDTH=890 HEIGHT=162 ALIGN="LEFT" VALIGN="TOP">
A Flash logo goes here that measures 890w x 162h.
</TD>
</TR>
<TR>
<TD WIDTH=890 HEIGHT=3 BGCOLOR="#070761"></TD>
</TR>
</TABLE>
<DIV class="main_content">
<DIV class="inner_content">
<P class="paragraph_titles">Any title</P>
<P class="general_text">General text</P>
<DIV class="add_space"></DIV>
<P class="bottom_section"><HR COLOR="#000000" WIDTH="860">Bottom text</P>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
______________________________________________________________________
css-discuss [[email protected]]
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/
