benslayton
01-14-2010, 05:02 PM
I need the divs "left_container" and "right_container" to expand 100% in height to its parent container "main_container". Anytime I change a set height on the .main_container the left and right container div disappears. I assume its just under the main_container though..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Document</title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
color: black;
background: #333 fixed;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
.main_container{
/*width:936px;*/
width:936px;
height:18px;
background: #F00;
padding-top:18px;
margin-top:35px;
clear:both;
}
.left_container{
float:left;
width:18px;
height:100%;
background:#C06;
}
.right_container{
float:right;
width:18px;
height:100%;
background:#0C0;
}
.middle_container{
float:left;
text-align:left;
width:900px;
min-height:500px;
background: #F60;
/*padding:20px 20px 20px 20px;*/
}
.bottom_container{
width:936px;
background: #F00;
height:18px;
clear:both;
}
</style>
</head>
<body>
<div align="center">
<div class="main_container">
<div class="left_container"></div>
<div class="middle_container">
Content Here<br />
</div>
<div class="right_container"></div>
<div class="bottom_container"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Document</title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
color: black;
background: #333 fixed;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
.main_container{
/*width:936px;*/
width:936px;
height:18px;
background: #F00;
padding-top:18px;
margin-top:35px;
clear:both;
}
.left_container{
float:left;
width:18px;
height:100%;
background:#C06;
}
.right_container{
float:right;
width:18px;
height:100%;
background:#0C0;
}
.middle_container{
float:left;
text-align:left;
width:900px;
min-height:500px;
background: #F60;
/*padding:20px 20px 20px 20px;*/
}
.bottom_container{
width:936px;
background: #F00;
height:18px;
clear:both;
}
</style>
</head>
<body>
<div align="center">
<div class="main_container">
<div class="left_container"></div>
<div class="middle_container">
Content Here<br />
</div>
<div class="right_container"></div>
<div class="bottom_container"></div>
</div>
</div>
</body>
</html>