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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Location
    Maryland, USA
    Posts
    165
    Thanks
    12
    Thanked 0 Times in 0 Posts

    CSS -Stretch container to bottom

    I'm about to tear my hair out with this problem, so any help would be appreciated.

    Here's the URL of the site I'm working on: http://branchespsp.com/user

    It's a drupal theme that I've modified, but the problem is simply CSS based. No drupal interference.

    I would simply like #container to stretch to the bottom of the page. Secondarily, I' also like to have a footer horizontally across the entire page (outside of #wrapper).

    I've tried all sorts of tricks, adding height: 100%; to every wrapping element, adding positioning (absolute and relative), clears, etc, and I cannot seem to accomplish my goal.

    I've been using firebug to do real-time css editing and find a solution, but here's some of the relevant CSS:
    Code:
    *{
    	margin:0;
    	padding:0;
    }
    
    html>body {
        min-height: 100%;
        height: auto;
    }
    
    html{
    	background: url(images/bg2.png) repeat;
    	height: 100%;
    	margin: 0;
    	padding: 0;
    }
    
    body{
    	position: relative;
    	margin: 0 auto;
    	padding: 0;
    	background:url(images/bg.png) repeat-x center -50px;
    	font:11px/20px Tahoma,Helvetica,sans-serif;
    	color:#5c5b5b;
    	height: 100%;
    }
    
    /* Layout Styles Starts */
    
    #wrapper-outer{
    	width:962px;
    	margin:0 auto;
    	background:url(images/wrapper-outer-bg_small.jpg) no-repeat 0 -50px;
    
    }
    	#wrapper{
    		width:922px;
    		margin:0 auto;
    	}
    	#container1, #container{
    		padding:20px 0;
    	}
    		#container{
    			position: relative;
    			background: white;
    			border-left: 1px dotted lightgrey;
    			border-right: 1px dotted lightgrey;
    		}
    	#sidearea{
    		width:200px;
    		float:left;
    		margin-left: 10px;
    		margin-right: 20px;
    		border-right: 1px solid lightgray;
    	}
    	#lower-right-graphic {
    		bottom: 0;
    		right: 0;
    		position: absolute;
    		z-index: 1;
    	}
    	#mainarea{
    		float:right;
    		margin:0 25px 0 0;
    		position:relative;
    		width:640px;
    		z-index:10;
    	}	
    	#footer-outer{
    		border-top:1px solid #cfcfcf;
    		width:100%;
    		background: white;
    	}
    		#footer{
    			width:904px;
    			margin:0 auto;
    			padding:6px 0 0 0;
    			font-size:10px;
    		}
    .clearfix:after {
    	content: ".";
    	display: block;
    	clear: both;
    	visibility: hidden;
    	line-height: 0;
    	height: 0;
    }
    .clearfix {
    	display: inline-block;
    }
    html[xmlns] .clearfix {
    	display: block;
    }
    * html .clearfix {
    	height: 1%;
    }
    and here's the Drupal Generated content (simplified):

    Code:
    <html>
    <body>
    <!-- Wrapper Outer Starts -->
    	<div id="wrapper-outer">
    	<!-- Wrapper Starts -->
    		<div id="wrapper">
    		<!-- Header Starts -->
    			<div id="header">
    			<!-- Top Links Starts -->
    				 <ul class="floatright">
    					add in links
    			<!-- Top Links Ends -->
    			<!-- Logo Starts -->
    				 logo
    			<!-- Logo Ends -->
    			</div>
    		<!-- Header Ends -->
    		<!-- Banner Starts -->
    			<div id="s3slider">
    			<!-- Slider Starts -->
    				slider
    			<!-- Slider Ends -->
    			</div>
    		<!-- Banner Ends -->
    		<!-- Menu Starts -->
    			<div id="menu">
    			<!-- Menu Items Starts -->
    				menu
                <!-- Menu Items Ends -->				
    			</div>
    		<!-- Menu Ends -->		
    		<!-- Container Starts -->
    			<div id="container" class="clearfix">
    			<!-- Mainarea Starts -->
                	<img id="lower-right-graphic" src="/themes/drupal-template/images/lower-right-graphic.png" />
    				<div id="mainarea">
    					main area content
                <!-- Mainarea Ends -->           
    			 <!-- Sidearea Starts -->
    				<div id="sidearea">					
    					side items
    				</div>
                <!-- Sidearea Ends -->
    			</div>
    		<!-- Container Ends -->
            </div>
    	<!-- Wrapper Ends -->
        </div>
    <!-- Wrapper Outer Ends -->
    <!-- Footer Wrapper Starts -->
    	<div id="footer-outer">
    	<!-- Footer Starts -->
    		<div id="footer" class="clearfix">
    			footer</div>
    		</div>
    	<!-- Footer Ends -->
    	</div>
    <!-- Footer Wrapper Ends -->
    </body>
    </html>
    Please help! Thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello madmatter23,
    This is a good full height solution - http://nopeople.com/CSS/full-height-layout/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Location
    Maryland, USA
    Posts
    165
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks for that link. I did manage to improve the situation using the height: auto; attribute.

    However, I would like the footer to be outside of the wrapper. When doing this, the height: auto; attribute forces the footer outside of the viewport (requiring a scroll). I'd like to have it visible by default. Is this possible?

    Thanks

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by madmatter23 View Post
    Thanks for that link. I did manage to improve the situation using the height: auto; attribute.

    However, I would like the footer to be outside of the wrapper. When doing this, the height: auto; attribute forces the footer outside of the viewport (requiring a scroll). I'd like to have it visible by default. Is this possible?

    Thanks
    Study the code on that demo site some more. I think you are probably leaving out the negative margin on #wrapper that pulls the footer back up. Your online version does not seem to be the current one you are talking about so I can only guess.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Location
    Maryland, USA
    Posts
    165
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Hi,

    I actually figured out the that the negative margin has something to do it. I must have updated the site right as you were looking at it.

    Thanks for your help though!
    Last edited by madmatter23; 12-04-2009 at 08:46 PM.

  • #6
    Regular Coder
    Join Date
    Jun 2007
    Location
    Maryland, USA
    Posts
    165
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Well it looks like I spoke too soon. I didn't realize that, when viewing content larger than the browser's viewport, the illusion of a full height wrapper breaks.

    The trouble is that I have one more nested div than the example that you provided. The basic hierarchy is html->body->#wrapper-outer->#wrapper (it's done this way because each needs a unique background). The problem is that while html, body, and #wrapper-outer all stretch to fit the entire window (regardless of size), #wrapper does not. This leaves a very awkward gap between the content and the footer.

    Is there a solution for this? I've tried reorganizing the html elements as well as modifying the css, and the problem remains.

    Any ideas? Please? Thank you.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by madmatter23 View Post
    Is there a solution for this? I've tried reorganizing the html elements as well as modifying the css, and the problem remains.

    Any ideas? Please? Thank you.
    Faux columns would probably work. Have a look at another demo of mine - http://nopeople.com/CSS/faux_columns/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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