...

View Full Version : Controlling div height to fill page



drhansenjr
12-16-2006, 10:21 PM
I am trying to create my first table-less layout and am having difficulty getting one of my divs to vertically fill its containing div 100%. I have tried min-height: 100% and various other approached but nothing has worked so far. Take a look at wphcc.anacystech.com. The containing div is formatted as:

div.pageMain {
padding: none;
margin: none;
border: 1px solid red;
text-align: left;
xbackground-color: #eeeeee;
background-color: #ffffff;
min-height: 100%;
}

and the inner div is:

div.pageLeft {
padding-top: 2px;
padding-left: none;
padding-bottom: none;
padding-right: none;
margin: none;
float: left;
width: 200px;
min-height: 100%;
text-align: left;
background-image: url(../images/mod-left-back.jpg);
border: 1px solid red;
}

(the red borders are just there for debugging purposes)

The remainder of the stylesheet is at:
http://wphcc.anacystech.com/templates/wphcc_1/css/template_css.css

Thanks!!

dh

MitaDC
12-16-2006, 10:48 PM
I will look into your problem, but I must say that you say you are trying to do a table-less design but you still have a ton of tables in your design. . .

MitaDC
12-16-2006, 11:01 PM
I just added 100% to your border div and it fixed the problem it looks like.



div.border-outer {
background-color:#FFFFFF;
border-color:-moz-use-text-color #808080;
border-style:none solid;
border-width:medium 1px;
height:100%;
padding:0px 2px 0px 0px;
width:800px;
}

drhansenjr
12-16-2006, 11:56 PM
Thanks, Mita --

I know there are tables there, too, though they come from the Joomla CMS I am using. The site template (into which Joomla plugs its content) is all built around divs. The table elements in the CSS are there to support the Joomla stuff.

drhansenjr
12-17-2006, 12:13 AM
Mita -

I'm still not seeing it. I'm looking for the yellow band (div.pageLeft) to fill the height of its surrounding div. Right now it's only expanding so far as its content it pushing it.

Arbitrator
12-17-2006, 03:11 PM
border-color:-moz-use-text-color #808080;What is this supposed to be? Sounds a lot like border-color: inherit gray except that it would only work in Mozilla products.

1212jtraceur
12-17-2006, 04:58 PM
Here's some CSS:



/* CSS Document */
/* ************ BEGIN NEW STUFF ************ */


p {
margin: 0px;
padding: 3px 0px 3px 0px;
}

h1 {
margin: 0px;
padding: 3px 0px 3px 0px;
font-family: arial, helvetica, sans-serif;
color: #006a00;
font-weight: bold;
font-size: 14px;
}

h2 {
margin: 0px;
padding: 3px 0px 3px 0px;
font-family: arial, helvetica, sans-serif;
color: #006a00;
font-weight: bold;
font-size: 12px;
}

h3 {
margin: 0px;
padding: 3px 0px 3px 0px;
font-family: arial, helvetica, sans-serif;
color: #c0c0c0;
font-weight: bold;
font-size: 12px;
}

h4 {
margin: 0px;
padding: 3px 0px 3px 0px;
font-family: arial, helvetica, sans-serif;
color: #006a00;
font-weight: bold;
font-size: 11px;
}

h5 {
margin: 0px;
padding: 3px 0px 3px 0px;
font-family: arial, helvetica, sans-serif;
color: #c0c0c0;
font-weight: bold;
font-size: 11px;
}

h6 {
margin: 0px;
padding: 3px 0px 3px 0px;
font-family: arial, helvetica, sans-serif;
color: #006a00;
font-weight: bold;
font-size: 10px;
}



body {
padding: 0px;
margin: 0px;
text-align: center;
padding: 0px;
border: none;
background-image: url(../images/bk2.png);
}

div.pageTopContent {
padding: 0px;
margin: 0px;
border: none; /** XXX **/
text-align: left;
}

div.xborder-outer {
position: relative;
background-color: #FFFFFF;
height: 100%;
xmargin: 0px;
margin: auto;
padding: 0px;
width: 100%;
background-image: url(../images/bk2.png);
text-align: center;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
}

div.pageContainer {
text-align: center;
margin: 0px;
padding: 0px;
border: 2px solid #ffffff;
background-color: #ffffff;
height: 100%;
width: 798px;
}

div.pageTopContent {

padding: 0px;
margin: 0px;
margin: auto;
border: none; /** XXX **/
text-align: left;
}

div.border-outer {

background-color: #FFFFFF;
border-style: none solid;
border-width: medium 1px;
height: 100%;
padding: 0px 2px 0px 0px;
width: 800px;
margin: auto;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
}

div.pageTop {

padding: 0px;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid #ffffff;
text-align: right;
background-color: #000000;
height: 20px;
text-align: left;
}


div.greenBar {

padding: 0px;
margin: 0px;
border: none;
background-color: #005f00;
height: 5px;
width: 100%;
}

div.pageHeader {

padding: 0px;
margin: 0px;
border: none; /** XXX **/
width: 796px;
height: 92px;
background-image: url(../images/cclogo-left-1.png);
text-align: left;
}


div.pageSubHeader {

padding: 0px;
margin: 0px;
border: none; /** XXX **/
text-align: left;
}


div.pagePathway {

padding: 0px;
margin: 0px;
border: none; /** XXX **/
text-align: left;
}


div.pageMain {

padding: 0px;
margin: 0px;
border: 1px solid red;
text-align: left;
background-color: #ffffff;
height: 100%;
overflow: auto;
position: relative;
}


div.pageLeft {
padding-top: 2px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
margin: 0px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 200px;
text-align: left;
background: yellow url(../images/mod-left-back.jpg);
border: 1px solid green;

}


div.pageBodyContent {

padding: 0px 30px 5px 10px;
margin: 0 0 0 200px;
border: none; /** XXX **/
width: 554px;
text-align: left;
height: 100%;
}


div.pageBottomContent {

padding: 0px;
margin: 0px;
border: none; /** XXX **/
text-align: left;
}


div.pageBanner {

padding: 0px;
margin: 0px;
border: none; /** XXX **/
text-align: left;
}


div.pageLegals {

padding: 0px;
margin: 0px;
border: none; /** XXX **/
text-align: left;
}


div.pageFooter {

padding: 0px;
margin: 0px;
border: none; /** XXX **/
text-align: left;
}

/* ************ END NEW STUFF ************ */




.clr {
clear: both;
}

.outline {
border: none; /** XXX **/
background: #ffffff;
padding: 2px;
}

#buttons_outer {
width: 635px;
margin-bottom: 2px;
margin-right: 2px;
float: left;

}

#buttons_inner {
border: none; /** XXX **/
height: 21px !important;
height: 23px;
}

#pathway_text {
overflow: hidden;
display: block;
height: 25px;
line-height: 25px !important;
line-height: 22px;
padding-left: 4px;
border: 1px solid #ccc;
margin-bottom: 2px;
}

#pathway_text img {
margin-left: 5px;
margin-right: 5px;
margin-top: 6px;
}

#buttons {
float: left;
margin: 0px;
padding: 0px;
width: auto;
}


ul#mainlevel-nav
{
list-style: none;
padding: 0;
margin: 0;
font-size: 0.8em;
}

ul#mainlevel-nav li
{
background-image: none;
padding-left: 0px;
padding-right: 0px;
float: left;
margin: 0;
font-size: 11px;
line-height: 21px;
white-space: nowrap;
border-right: 1px solid #ff0000;
}

ul#mainlevel-nav li a
{
display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: #333333;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

ul#mainlevel-nav li a:hover
{
color: #fff;
background: #006a00;
}


#search_outer {
float: left;
width: 165px;
}

#search_inner {
border: none; /** XXX **/
padding: 0px;
height: 21px !important;
height: 23px;
overflow: hidden;
}

#search_inner form {
padding: 0;
margin: 0;
}

#search_inner .inputbox {
border: 0px;
padding: 3px 3px 3px 5px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
color: #006a00;
}

#header_outer {
text-align: left;
border: 0px;
margin: 0px;
}

#header {
float: left;
padding: 0px;
margin-right: 2px;
width: 635px;
height: 150px;
background: url(../images/header_short.jpg) no-repeat;
}

#top_outer{
float: left;
width: 165px;
}

#top_inner {
border: none; /** XXX **/
padding: 2px;
height: 144px !important;
height: 150px;
overflow: hidden;
float: none !important;
float: left;
}

#left_outer {
float: left;
margin-top: 2px;
width: 165px;
}

#left_inner {
border: none; /** XXX **/
padding: 2px;
float: none !important;
float: left;
}

#content_outer {
padding: 0px;
margin-top: 0px;
margin-left: 2px;
/** border: 1px solid #cccccc; **/
float: left;
width: 635px;
}

#content_inner{
float: none !important;
float: left;
padding: 0;
padding-top: 2px;
margin: 0;
}

table.content_table {
width: 100%;
padding: 0px;
margin: 0px;
}

table.content_table td {
padding: 0px;
margin: 0px;
}


#banner_inner {
float: left;
padding: 0px;
height: 70px;
}

#poweredby_inner {
float: right;
padding: 0px;
margin-left: 0px;
height: 70px;
}

#right_outer {
margin-left: 2px;
width: 165px;
}

#right_inner {
float: none !important;
float: left;
border: none; /** XXX **/
padding: 2px;
}


.user1_inner {
border: none; /** XXX **/
float: none !important;
float: left;
margin: 0px;
padding: 2px;
}

.user2_inner {
border: none; /** XXX **/
float: none !important;
float: left;
margin: 0px;
padding: 2px;
}

table td.body_outer {
padding: 2px;
border: none; /** XXX **/
}

.maintitle {
color: #ffffff;
font-size: 40px;
padding-left: 15px;
padding-top: 20px;
}

.error {
font-style: italic;
text-transform: uppercase;
padding: 5px;
color: #cccccc;
font-size: 14px;
font-weight: bold;
}

/** old stuff **/

.back_button {
float: left;
text-align: center;
font-size: 11px;
font-weight: bold;
border: none; /** XXX **/
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 10px;
line-height: 20px;
margin: 1px;
}

.pagenav {
text-align: center;
font-size: 11px;
font-weight: bold;
border: none; /** XXX **/
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 10px;
line-height: 20px;
margin: 1px;
}

.pagenavbar {
margin-right: 10px;
float: right;
}

#footer {
text-align: center;
padding: 3px;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 15px;
padding-left: 12px;
margin-left: 4px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}


td {
text-align: left;
font-size: 11px;
}

/* Joomla core stuff */
a:link, a:visited {
color: #006a00; text-decoration: none;
font-weight: bold;
}

a:hover {
color: #900; text-decoration: none;
font-weight: bold;
}

table.contentpaneopen {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}

table.contentpaneopen td {
padding-right: 5px;
}

table.contentpaneopen td.componentheading {
padding-left: 4px;
}



table.contentpane {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}

table.contentpane td {
margin: 0px;
padding: 0px;
}

table.contentpane td.componentheading {
padding-left: 4px;
}

table.contentpaneopen fieldset {
border: 0px;
border-bottom: 1px solid #eee;
}

.button {
color: #006a00;
font-family: Arial, Hevlvetica, sans-serif;
text-align: center;
font-size: 11px;
font-weight: bold;
border: none; /** XXX **/
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 5px;
line-height: 18px !important;
line-height: 16px;
height: 26px !important;
height: 24px;
margin: 1px;
}

.inputbox {
border: none; /** XXX **/
border:solid 1px #cccccc;
background-color: #ffffff;
}

.componentheading {
background: url(../images/subhead_bg.png) repeat-x;
color: #ffffff;
text-align: left;
padding-top: 4px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;

}

.contentcolumn {
padding-right: 5px;
}

.contentheading {
height: 30px;
color: #006a00;
font-weight: bold;
font-size: 14px;
white-space: nowrap;
}



.contentpagetitle {
font-size: 13px;
font-weight: bold;
color: #ff0000;
text-align:left;
}

table.searchinto {
width: 100%;
}

table.searchintro td {
font-weight: bold;
}

table.moduletable {
width: 100%;
height: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
}

div.moduletable {
padding: 0;
margin-bottom: 2px;
margin-left: 2px;
}

table.moduletable th, div.moduletable h3 {
background: url(../images/subhead_bg.png) repeat-x;
color: #ffffff;
text-align: left;
padding-left: 4px;
padding-bottom: 4px;
height: 21px;
line-height: 15px;
font-weight: normal;
font-size: 14px;
font-family: Geneva, Arial, Helvetica, sans-serif;
text-transform: lowercase;
margin: 0px 0px 2px 0px;
}

table.moduletable td {
font-size: 11px;
padding: 9px;
margin: 9px;
font-weight: normal;
}

table.pollstableborder td {
padding: 2px;
}

.sectiontableheader {
font-weight: bold;
background: #f0f0f0;
padding: 4px;
}

.sectiontablefooter {

}

.sectiontableentry1 {
background-color : #ffffff;
}

.sectiontableentry2 {
background-color : #f9f9f9;
}

.small {
color: #999999;
font-size: 11px;
}

.createdate {
height: 15px;
padding-bottom: 10px;
color: #999999;
font-size: 11px;
}

.modifydate {
height: 15px;
padding-top: 10px;
color: #999999;
font-size: 11px;
}

table.contenttoc {
border: none; /** XXX **/
padding: 2px;
margin-left: 2px;
margin-bottom: 2px;
}

table.contenttoc td {
padding: 2px;
}

table.contenttoc th {
background: url(../images/subhead_bg.png) repeat-x;
color: #666666;
text-align: left;
padding-top: 2px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/menu_bg.png) no-repeat;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ccc;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 100%;
text-decoration: none;
}

a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: none;
color: #fff;
}

a.mainlevel#active_menu {
color:#fff;
font-weight: bold;
}

a.mainlevel#active_menu:hover {
color: #fff;
}

a.sublevel:link, a.sublevel:visited {
padding-left: 1px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #006a00;
text-align: left;
}

a.sublevel:hover {
color: #900;
text-decoration: none;
}

a.sublevel#active_menu {
color: #333;
}

.highlight {
background-color: Yellow;
color: Blue;
padding: 0;
}
.code {
background-color: #ddd;
border: 1px solid #bbb;
}

form {
/* removes space below form elements */
margin: 0;
padding: 0;
}

div.mosimage {
border: 1px solid #ccc;
}

.mosimage {
border: 1px solid #cccccc;
margin: 5px
}

.mosimage_caption {
margin-top: 2px;
background: #efefef;
padding: 1px 2px;
color: #666;
font-size: 10px;
border-top: 1px solid #cccccc;
}

span.article_seperator {
display: block;
height: 1.5em;
}


I changed the color of the borders and added a background color to div.pageLeft to illustrate what's happening. I applied 'overflow: auto; position: relative;' to div.pageMain to make it expand and to allow div.pageLeftContent to position absolutely with 'top: 0; left: 0; bottom: 0;'.

Since it is removed from the document flow, a left margin must be defined for div.pageBodyContent. Since div.pageLeftContent has a width of 200px, 200px works well as the left margin.

1212jtraceur

drhansenjr
12-17-2006, 09:41 PM
What is this supposed to be? Sounds a lot like border-color: inherit gray except that it would only work in Mozilla products.

That's something that carried over from a stylesheet I based the current one on. I have no idea why it was there and have since deleted it.

drhansenjr
12-17-2006, 09:43 PM
I changed the color of the borders and added a background color to div.pageLeft to illustrate what's happening. I applied 'overflow: auto; position: relative;' to div.pageMain to make it expand and to allow div.pageLeftContent to position absolutely with 'top: 0; left: 0; bottom: 0;'.

Since it is removed from the document flow, a left margin must be defined for div.pageBodyContent. Since div.pageLeftContent has a width of 200px, 200px works well as the left margin.

That is beautiful, 1212! Many thanks!!

1212jtraceur
12-17-2006, 11:53 PM
You're quite welcome :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum