ansaurus

Question

Answer 1

A:

I'd assume this is causing a problem: height:auto !important; height:100%;

You're saying that the automatic height is important, so it's ignoring your 100% height. The automatic height will always take precedence then. Edit: However, that division will still expand because of your min-height: 100% property, although it is still redundant and should be fixed.

Your content class will not expand vertically, that's not the behavior of a division. It will only expand vertically with the text inside it or if you specify a height.

animuson 2010-06-05 21:33:53

Answer 2

A:

In your code footer has position:absolute but the actual position (eg. bottom: 30px;) is not given. Also, if you want the .content or .push to affect the .footer position, they would have to be in the same flow (eg. both position:static;). Giving footer position:absolute by definition takes the footer positioning from the normal flow, so this is incompatible with the objective.

I assume what you're trying to do is get a page that is 100% even with little content, and a footer that's always on the bottom of the page/screen.

FooterStickAlt is a good cross-browser solution to achieve that. http://www.themaninblue.com/experiment/footerStickAlt/

Marcus 2010-06-05 21:49:41

Yes, I have this using this layout - http://www.cssstickyfooter.com/Now I am adding left and right elements which I would like at least the right to be 100% height to carry the white background to the footer. As it is now with content it looks fine, if it has no or little content the white does not carry through.http://img686.imageshack.us/img686/7725/screenshotbj.png

Tim 2010-06-05 22:53:48

Answer 3

A:

Without being able to look at the code until a little later, I'd suggust putting the class "clearfix" onto the div that isn't fully expandning with the white.

Here is where you can get a good definition of what clearfix is, and a definition for the css.

TheGeekYouNeed 2010-06-06 00:03:45

Tried the clearfix and it still doesn't drop the right side 100% height of the body.

Tim 2010-06-06 12:07:11

Answer 4

A:

The correct css should look like this:

<style type="text/css" media="screen">
    html,body
    {
        margin:0; padding:0; height:100%;
    }
    .wrapper
    {
        position:relative;
        min-height:100%;
        /*background: #fef;*/
    }
    .container
    {
        margin: 0 auto;
        width: 930px;
        padding: 0 0 200px 0; /*200 pixels at the bottom, to stay over the footer*/
        /*background: #fff; */
    }
    .left /* This was one cause. Old line: <div id="left">, new line: <div class="left"> */
    {
        float: left;
        width: 240px;
        /*background: #efe;*/
    }
    .right
    {
        float: left;
        width: 690px; 
        /*background: #efa;*/
    }
    .right .content
    {
        padding: 10px;
    }
    .clear
    {
        clear: both;
    }
    .footer
    {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 200px;
        /*background: #eff;*/
    }
</style>

I'm sure this will help you.

<div class="wrapper">
    <div class="container">
        <div class="left">
           left
        </div>
        <div class="right">

            <div class="content">
                content
            </div>

        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">
        footer
    </div>
</div>

This will look like you wanted to have it. The footer is at the bottom, everytime, just as you wanted to have it :) Hope it helps!

Nort 2010-06-06 06:04:46

I tried this solution and it gives me the same scenario. My issue isn't with the footer it is with the right column not being 100% height. When I through in positioning into the div it works except the text gets lost behind the footer.Basically I am trying to get a 100% height element within an element already set 100% - I am thinking this isn't possible as I can not find a solution anywhere unless I go JS - which I am not prepared to do.

Tim 2010-06-06 12:11:35

Not prepared as in... you don't know JS or aren't able to use javascript in your solution due to constraints from the boss?

TheGeekYouNeed 2010-06-06 12:21:45

I did a screen shot on what I get when I use your layout above. http://img7.imageshack.us/img7/7949/screenshotoil.png

Tim 2010-06-06 12:22:11

Here is something I was toying with and just do not know how to make it work either, was to make the background container larger and extend to infinity so to speak. Can I get away with that?As for JS I tried that and I was having issues on the when the browser resized.I am strickly a PHP programmer and the front guy got fired. Need a job!

Tim 2010-06-06 12:26:32

look, ive found something for you :) http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

Nort 2010-06-06 15:22:48

Many thanks. I will give it a go!

Tim 2010-06-06 16:40:00

That works if the text in the content area is filled, once empty the height does not do the 100 percent.Got a web site? I now looking to either try something else or hire some to fix this.

Tim 2010-06-06 22:59:14

combine my code, with the other. maybe it could be the solution

Nort 2010-06-07 05:54:04

Found it, and it works. The web site you sent me to didn't work, but I did a search based on faux columns, and followed the instructions for a three column 100% header footer. Do I post it here answer my own question? Incase one else needs it.

Tim 2010-06-07 12:19:45

Yes, you can :)

Nort 2010-06-07 14:24:06

Answer 5

A:

Found my own solution based on a lead that Cen wrote; searched 100% Layout with Faux Columns and got this http://www.savio.no/examples/three-column-layout-6.asp

With a little tweaking and splicing up my layout different I came up with the following solution which works across all browsers.

Tim 2010-06-07 12:58:46

Answer 6

+2 A:

Answering animuson: actually the following code is necessary for IE6 support:

min-height: 100%; /* real browsers */
height: auto !important; /* real browsers */
height: 100%; /* IE6: treated as min-height*/

IE6 doesn't understand !important, but it does treat height as min-height. So to support both IE6 and modern browser you have to use the exact same code (order is important).

Imeron 2010-06-07 13:14:24

ansaurus

tags:

views:

answers:

CSS 100 percent height body and element

related questions