repeat-y not tiling to 100% of vertical height

background-image

[blam]

Ok, so I've been having a problem with my main layout where I'm attempting to create 1 large (eh, I guess 2 large) faux column so that my page content is always at a minimum 100% of the browser's vertical height. However, it's essentially not tiling and the layout is only as tall as their is acutual content (text/images) to fill it.

I actually have a TON of CSS and HTML code... and if I need to post it all I will... here's the pertinent code IMO

*{padding:0; margin:0;}
body {font-size:62.5%; font-family:verdana,arial,sans-serif;} /*Font-size: 1.0em = 10px when browser default size is 16px*/
.bg-container {background:rgb(4,8,19) url(../img/background_edges.jpg) repeat-y center;}
.page-container {width:900px; margin:0px auto; font-size:1.0em;}
.main {clear:both; width:900px; padding-bottom:30px; background:transparent url(../img/bg_main_withoutnav.jpg) repeat-y center;}
.main-left-nav {clear:both; width:900px; padding-bottom:30px; background:transparent url(../img/bg_main_withnav.jpg) repeat-y top left;}
.left-navigation {display:inline /*Fix IE floating margin bug*/; float:left; width:200px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.main-content {display:inline /*Fix IE floating margin bug*/; float:left; width:840px; margin:0 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.main-content-left-nav {display:inline; /*Fix IE floating margin bug*/; float:left; width:640px; margin:0 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.footer {clear:both; width:900px; padding:1.0em 0 1.0em 0; background:rgb(225,225,225) url(../img/bg_foot.jpg); font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}

.bg-container effectively tiles an image that is the left and right images that border my main content
.main is my main content between my header and footer that tiles a very slim image to fill the content area.
.main-left-nav is used for pages that have lefthand navigation and contains a different image for the appropriate background coloring

Neither of them will tile 100%... my pages only have the height of whatever content is in them.

Here's all my clear classes for my floats:

.bg-container:after, .page-container:after, .header:after, .header-breadcrumbs:after, .main:after, .main-left-nav:after, .main-content:after, .main-content-left-nav:after, .left-navigation:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.column1-unit:after, .column2-unit-left:after, .column2-unit-right:after, .column3-unit-left:after, .column3-unit-middle:after, .column3-unit-right:after, .column4-unit-left:after, .column4-unit-middle-left:after, .column4-unit-middle-right:after, .column4-unit-right:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.footer:after, p:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clear-contentunit {clear:both; width:840px; height:0.1em; border:none; background:rgb(238, 238, 238); color:rgb(238, 238, 238);}
.clear-contentunit-left-nav {clear:both; width:640px; height:0.1em; border:none; background:rgb(238, 238, 238); color:rgb(238, 238, 238);}

since the .main class is between my header and footer, here are those classes:

/* HEADER */
.header {width:900px; font-family:"trebuchet ms",arial,sans-serif;}
.header-middle {width:900px; height:150px; background:rgb(230,230,230) url(../img/banner2.jpg); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.header-bottom {width:900px; height:40px; background:rgb(255,255,255) url(../img/bg_main_withoutnav.jpg) repeat-y;}
.header-breadcrumbs {clear:both; width:900px; padding:1.0em 0 1.5em 0; background:rgb(255,255,255) url(../img/bg_main_withoutnav.jpg) repeat-y;}

/* FOOTER */
.footer p {line-height:1.3em; text-align:center; color:rgb(125,125,125); font-weight:bold; font-size:110%;}
.footer p.credits {font-weight:normal;}
.footer a {text-decoration:underline; color:rgb(125,125,125);}
.footer a:hover {text-decoration:none; color:rgb(0,0,0);}
.footer a:visited {color:rgb(0,0,0);}

any idea why neither background_edges.jpg nor bg_main_withoutnav.jpg tile to 100% of the vertical height?

thanks in advance,
Blam

[edited by: alt131 at 8:13 pm (utc) on Jul 14, 2011]
[edit reason] Thread Tidy [/edit]

[alt131]

Hi Blam, welcome to WebmasterWorld :) - and really appreciate you trying to avoid long code dumps. There is a bit of code (although not quite as bad as it can get ;)) and hopefully this is enough html to outline the layout.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My title</title>
</head>
<!-- Global IE fix to avoid layout crash when single word size wider than column width -->
<!--[if IE]><style type="text/css"> body {word-wrap: break-word;}</style><![endif]-->
<body>
<!-- Background Edge Images Container -->
<div class="bg-container">
<!-- Main Page Container -->
<div class="page-container">
<!-- A. HEADER -->
<div class="header">
<!-- A.1 HEADER MIDDLE -->
<div class="header-middle"> </div>
<!-- A.2 HEADER BOTTOM -->
<div class="header-bottom">
<!-- Navigation Level 2 (Drop-down menus) -->
<div class="nav2">
<!-- Navigation item -->
<ul>
<li><a href="index.html">Home</a></li>
</ul>
<!-- Navigation item -->
<ul>
<li><a href="#">Practice</a></li>
</ul>
<!-- Navigation item -->
<ul>
<li><a href="#">Replays</a></li>
</ul>
<!-- Navigation item -->
<ul>
<li><a href="#">News</a></li>
</ul>
</div>
</div>
<!-- Breadcrumbs -->
<div class="header-breadcrumbs">
<ul>
<li><a href="/">Home</a></li>
<li>Guides</li>
<li>Suggestion</li>
</ul>
</div>
</div>
<!-- B. MAIN -->
<div class="main">
<!-- B.1 MAIN CONTENT -->
<div class="main-content">
<!-- Pagetitle -->
<h1 class="pagetitle">Suggestions</h1>
<!-- Content unit - One column -->
<div class="column1-unit">
<p>Thank you </p>
</div>
</div>
</div>
<!-- C. FOOTER AREA -->
<div class="footer"> </div>
</div>
</div>
</body>
</html>

Note the navigation is a horizontal drop-down, html and body both have 100% height.

[blam]

Thanks for posting the HTML!

Correct, currently {height:100%;} applied to both html, and body, which would be an edit to the CSS code I provided above.

example link remains the same


I do very much appreciate anyones help!

blam

[blam]

Ok, so adding height:100% to .bg-container and .page-container has made it so that the BG image in .bg-container now fill to 100% of the screen at a minimum... so that's a plus

when I add height:100% to .main however it tiles the BG image there to 100% without accounting for the height of the header objects and the footer objects (I'm guessing) so it actually stretches the main content area well over 100% and the BG image does not tile (as it shouldn't) to keep up...

[blam]

I'm marking this SOLVED

I ditched my outter wrapper and called that BG image in the body class itself...2 wrappers was killing me... all is well...