...

View Full Version : CSS -Stretch container to bottom



madmatter23
12-03-2009, 11:05 PM
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:


*{
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):



<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!

Excavator
12-04-2009, 12:52 AM
Hello madmatter23,
This is a good full height solution - http://nopeople.com/CSS/full-height-layout/index.html

madmatter23
12-04-2009, 06:39 PM
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

Excavator
12-04-2009, 06:55 PM
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.

madmatter23
12-04-2009, 07:39 PM
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!

madmatter23
12-04-2009, 08:44 PM
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.

Excavator
12-04-2009, 08:47 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum