Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Controlling div height to fill page

    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/template...mplate_css.css

    Thanks!!

    dh

  • #2
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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. . .

  • #3
    Regular Coder
    Join Date
    Aug 2004
    Posts
    143
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just added 100% to your border div and it fixed the problem it looks like.

    Code:
    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;
    }

  • #4
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by MitaDC View Post
    Code:
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here's some CSS:

    Code:
    /* 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

  • #8
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    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.

  • #9
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!!

  • #10
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You're quite welcome


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •