Problem with 100% height

Question

I'm having a problem trying to get the LEFT and RIGHT DIV
tags to drop down 100% along with the CENTER DIV tag. I don't want
to use javascript. In all browser, except IE6, the DIV tags will
fill 100% of the document window, but will not extend down when the
page scrolls down. In IE6, the DIV tags will not fill 100% at all.
Here is a link to the site:
http://www.katart.biz/verymerry/gray_miles.htm
Here is the CSS code:
html, body {
background-color: #861316;
margin: 0px;
padding: 0px;
background-image: url(images/pagebg.jpg);
background-repeat: no-repeat;
background-position: center top;
#container {
padding: 0px;
height: 100%;
width: 850px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -425px;
overflow: visible;
position: absolute;
visibility: visible;
z-index: 1;
left: 50%;
top: 0px;
#rightmargin {
background-color: #861316;
padding: 0px;
height: 100%;
width: 25px;
overflow: visible;
visibility: visible;
background-image: url(images/rightbg.gif);
background-repeat: repeat-y;
background-position: left top;
float: left;
margin: 0px;
#leftmargin {
background-color: #861316;
padding: 0px;
height: 100%;
width: 25px;
overflow: visible;
visibility: visible;
background-image: url(images/leftbg.gif);
background-repeat: repeat-y;
background-position: left top;
float: left;
margin: 0px;
#content {
background-color: #FFFFFF;
padding: 0px;
min-height: 100%;
width: 800px;
visibility: visible;
float: left;
margin: 0px;
background-image: url(images/mainbg.jpg);
background-repeat: no-repeat;
background-position: left top;
#contentkids {
background-color: #FFFFFF;
padding: 0px;
min-height: 100%;
width: 800px;
visibility: visible;
float: left;
margin: 0px;
background-image: url(images/kidsbg.jpg);
background-repeat: no-repeat;
background-position: left top;
#content #left {
text-align: left;
float: left;
height: auto;
width: 340px;
padding-left: 92px;
color: #21723C;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 15px;
line-height: 22px;
font-weight: normal;
text-decoration: none;
margin-top: 172px;
#content #left h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 32px;
font-weight: normal;
color: #20723D;
#contentkids #left {
text-align: left;
float: left;
height: auto;
width: 340px;
padding-left: 92px;
color: #21723C;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 15px;
line-height: 22px;
font-weight: normal;
text-decoration: none;
margin-top: 190px;
#contentkids #left h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 32px;
font-weight: normal;
color: #20723D;
#contentkids #left a {
color: #20723D;
text-decoration: underline;
#contentkids #left a:hover {
color: #861316;
text-decoration: none;
#content #right {
float: right;
height: auto;
width: 368px;
#contentkids #right {
float: right;
height: auto;
width: 368px;
margin-top: 190px;
#content #footer {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
color: #861316;
text-decoration: none;
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
clear: both;
#content #footer a {
color: #861316;
text-decoration: none;
#content #footer a:hover {
color: #1F713A;
text-decoration: none;
#contentkids #footer {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
color: #861316;
text-decoration: none;
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
clear: both;
#contentkids #footer a {
color: #861316;
text-decoration: none;
#contentkids #footer a:hover {
color: #1F713A;
text-decoration: none;
Any help would be appreciated. Thanks,
Dan

Answer 1

It cannot be done without javascript.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Dan Cool" <[email protected]> wrote in
message
news:[email protected]...
> I'm having a problem trying to get the LEFT and RIGHT
DIV tags to drop
> down
> 100% along with the CENTER DIV tag. I don't want to use
javascript. In all
> browser, except IE6, the DIV tags will fill 100% of the
document window,
> but
> will not extend down when the page scrolls down. In IE6,
the DIV tags will
> not
> fill 100% at all.
>
> Here is a link to the site:
http://www.katart.biz/verymerry/gray_miles.htm
>
> Here is the CSS code:
>
> html, body {
> background-color: #861316;
> margin: 0px;
> padding: 0px;
> background-image: url(images/pagebg.jpg);
> background-repeat: no-repeat;
> background-position: center top;
> }
> #container {
> padding: 0px;
> height: 100%;
> width: 850px;
> margin-top: 0px;
> margin-right: 0px;
> margin-bottom: 0px;
> margin-left: -425px;
> overflow: visible;
> position: absolute;
> visibility: visible;
> z-index: 1;
> left: 50%;
> top: 0px;
> }
> #rightmargin {
> background-color: #861316;
> padding: 0px;
> height: 100%;
> width: 25px;
> overflow: visible;
> visibility: visible;
> background-image: url(images/rightbg.gif);
> background-repeat: repeat-y;
> background-position: left top;
> float: left;
> margin: 0px;
> }
> #leftmargin {
> background-color: #861316;
> padding: 0px;
> height: 100%;
> width: 25px;
> overflow: visible;
> visibility: visible;
> background-image: url(images/leftbg.gif);
> background-repeat: repeat-y;
> background-position: left top;
> float: left;
> margin: 0px;
> }
> #content {
> background-color: #FFFFFF;
> padding: 0px;
> min-height: 100%;
> width: 800px;
> visibility: visible;
> float: left;
> margin: 0px;
> background-image: url(images/mainbg.jpg);
> background-repeat: no-repeat;
> background-position: left top;
> }
> #contentkids {
> background-color: #FFFFFF;
> padding: 0px;
> min-height: 100%;
> width: 800px;
> visibility: visible;
> float: left;
> margin: 0px;
> background-image: url(images/kidsbg.jpg);
> background-repeat: no-repeat;
> background-position: left top;
> }
> #content #left {
> text-align: left;
> float: left;
> height: auto;
> width: 340px;
> padding-left: 92px;
> color: #21723C;
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 15px;
> line-height: 22px;
> font-weight: normal;
> text-decoration: none;
> margin-top: 172px;
> }
> #content #left h1 {
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 32px;
> font-weight: normal;
> color: #20723D;
> }
> #contentkids #left {
> text-align: left;
> float: left;
> height: auto;
> width: 340px;
> padding-left: 92px;
> color: #21723C;
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 15px;
> line-height: 22px;
> font-weight: normal;
> text-decoration: none;
> margin-top: 190px;
> }
> #contentkids #left h1 {
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 32px;
> font-weight: normal;
> color: #20723D;
> }
> #contentkids #left a {
> color: #20723D;
> text-decoration: underline;
> }
> #contentkids #left a:hover {
> color: #861316;
> text-decoration: none;
> }
> #content #right {
> float: right;
> height: auto;
> width: 368px;
> }
> #contentkids #right {
> float: right;
> height: auto;
> width: 368px;
> margin-top: 190px;
> }
> #content #footer {
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 14px;
> font-weight: normal;
> text-transform: uppercase;
> color: #861316;
> text-decoration: none;
> text-align: center;
> padding-top: 12px;
> padding-bottom: 12px;
> clear: both;
> }
> #content #footer a {
> color: #861316;
> text-decoration: none;
> }
> #content #footer a:hover {
> color: #1F713A;
> text-decoration: none;
> }
> #contentkids #footer {
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 14px;
> font-weight: normal;
> text-transform: uppercase;
> color: #861316;
> text-decoration: none;
> text-align: center;
> padding-top: 12px;
> padding-bottom: 12px;
> clear: both;
> }
> #contentkids #footer a {
> color: #861316;
> text-decoration: none;
> }
> #contentkids #footer a:hover {
> color: #1F713A;
> text-decoration: none;
> }
>
> Any help would be appreciated. Thanks,
> Dan
>