site wont stretch to 100% height like I want it too.

[hawkal]

How can I get my site http://pimpriots.com/test/so that the top and bottom touch the top and bottom of the browser? Also note that it needs to expand and contract as news or rounds are added or removed from the page but so that the footer always touches the bottom of the page.

I have tried setting a min-height but that wouldn't work, neither would just setting height to 100% in the main div. Also I tried setting a fixed height but that would look silly if the site was long enough for 3 rounds but only one shown.

[Louis Lazaris]

What you're asking for is virtually impossible. If you have content expanding, then obviously it won't always "touch the bottom of the browser". If what you're saying is that you want a "minimum height" which touches the bottom, and goes further otherwise, then "min-height" will work, but not in IE6. For IE6 you'll have to use the * html hack and use just plain "height", which acts like "min-height" in that browser.

The example that you provided has too much content, so it cannot stop at the bottom of the browser.

Louis

[hawkal]

The example that you provided has too much content, so it cannot stop at the bottom of the browser.

I don't quite understand what you mean here. I still expect there to be a scroll bar like in that example because of the amount of content .

The thing is I am converting the site from a table based design to a div/css based design and my aim is to get it to look generally as similar to the original as possible. If you look at http://pimpriots.com and compare it with http://www.pimpriots.com/test notice how on the first one the footer is always touching the bottom of the browser. Now all I want to be able to do is recreate that exactly the same but without using tables.

[PicnicTutorials]

This is all you need to do!

[Beatta]

I am so sorry, I posted in the wrong place.

[Paul O'B]

If you are looking for a sticky footer then look in the faq as this is explained in detail.

Here is an example of the ultimate sticky footer and the version I recommend using (because the sticky footer was originally invented (years and years ago) with help from me).

This is all you need to do!

Nice demo but you missed out one vital element from your first demo and that is that you need to protect the space that the negative margin creates otherwise it will overlap your content.

You have added the clearfooter technique to the absolute example but not to your first example which needs it. It doesn't cause a problem in your example because the h1 has 125px top and bottom padding. However you should mention this in the demo otherwise people won't understand

Also note that the absolute example fails in dynamic situations in IE because it forgets where the footer is.

On a more important note I notice that you have added position relative to the html element and in safari 1.2, 1.3, and 2.0 position:relative on the html element causes safari to hide all other content that has position:relative applied. A major bug and a major reason for never applying position relative to the html element. In fact in most cases the only styles you should ever add to the html element is margin:0;padding:0;

Hope that helps

[PicnicTutorials]

Thanks Paul, and thanks for the info! I'll be sure to mention that point in my tut. Regarding the position relative on the html though - what do you suggest instead as I definitely don't want it to break those other browsers you mentioned? Erik-J and I were working on it a while back and I thought, at the time, that this this was the best solution. I did figure it was somewhat of a band aid though. Erik-J came up with a different and more complicated solution as well - but I can't remember what it was. I think it involved floats and overflow. Because your mentioning it I'm sure your armed with a good solution for Opera 9.5 - care to share it with me?

Note: a while ago when I was testing this problem, if I remember correctly, I found that the majority (if not all) layouts would not be affected by this Opera problem because if there is any other div inside the wrapper and filled with content then it goes 100% height - I think that is. So in other words, this fix for Opera that I'm looking for is really probably only for the sake of my example. Because it's an empty wrapper with no content or div. Thanks!

Here is my example in question in case anybody would like to mess with it.
http://www.visibilityinherit.com/cod...ed-example.php

[eLLAyJAy]

I'm running into a similar issue if you guys could help me out with?

www.lpsdemo.com

The background image repeat-y is not expanding all of the content in side the #outsideWrapper or #container div in firefox only and it looks fine in IE 6 & 7

On this site I only have access to one of the 3 css files:
http://lpsdemo.com/clientsite/style/...?OrderId=18362

Also I know the code all looks like crap but the CMS system to edit the site is not very friendly at all

Thanks for your help

[Paul O'B]

I'm sure your armed with a good solution for Opera 9.5 - care to share it with me?

Well I'm loathe to change the demos to include a fix for the opera 9.5 bug because its clearly a bug. There is no reason why adding position:relative to an element will suddenly make it obey the height you have set. I am guessing that in opera 9.6 this will be fixed.

However there is a solution based along the lines of what you had already except that you apply position:absolute to the body element and give it a 100% width. This avoids the safari bug and theoretically should make no difference to other browsers.

body{position:absolute;width:100%}/*opera 9.5 fix*/

Opera has always had problems with 100% height and even with the fix above it won't redraw the screen if you make the window shorter or higher. This has always been the case and one of the reasons I don't like opera (sorry Dan and Tommy ).

[Paul O'B]

Hi,

The background image repeat-y is not expanding

You have set the container to 100% height which means that it won't ever stretch more than the intial viewport. You need to use min-height:100% instead. See the faq on 100% height in the faq for more info.

#container {
    margin: 0px auto;
    width: 985px;  /* 750px; */  /* 716px; */
    min-height: 100%;
    text-align: left;
    position: relative;

  } 
* html #container{height:100%}

If you can't access that css file then you will have to over-ride the height in a file you can access.

e.g.

#container {
   height:auto!important;
   min-height: 100%;
} 
* html #container{height:100%!important}

[PicnicTutorials]

Alright - thanks again Paul!

Well I'm loathe to change the demos to include a fix for the opera 9.5 bug because its clearly a bug. There is no reason why adding position:relative to an element will suddenly make it obey the height you have set. I am guessing that in opera 9.6 this will be fixed.

Your right, I'll probably just remove the position relative, and any other fix for Opera altogether. They should fix it in the next release. I'll just make a little note of it at the bottom of my tut to avoid the ney-sayers. As I've received comments in the past "it doesn't work in Opera". Thanks - take care!

[hawkal]

Thank you so much! unfortunately the rounds still extended past the sticky footer which I fixed by getting rid of "float:right;" and substituted it with "margin-left:51%;" now this works perfectly in Firefox (version 3). The news is layered over that 51% margin but in IE6 and IE7 it treats the margin as if solid and the rounds are below the news but of the other side of the site.

How can I align the rounds to the right like they're supposed to be and work correctly in IE?

[Paul O'B]

Hi,

IE is probably suffering from the 3 pixel jog (see faq on floats) and making the element push too wide.

When you have 2 columns you should always float both columns to avoid the 3 px jog and other float clearing problems that will occur inside the static container.

In your code just float the right column and then clear the floats.

.indexrounds{
width:49%;
font-size:10px;
text-align:center;
float:right;
}
.main{overflow:hidden}/* clear floats*/
#footer{clear:both}

See the faq on floats for other ways of clearing floats as the overflow method is not always the best choice.

[hawkal]

Thank you very much Paul. I am very grateful for your help.

[eLLAyJAy]

Hi,


You have set the container to 100% height which means that it won't ever stretch more than the intial viewport. You need to use min-height:100% instead. See the faq on 100% height in the faq for more info.

#container {
    margin: 0px auto;
    width: 985px;  /* 750px; */  /* 716px; */
    min-height: 100%;
    text-align: left;
    position: relative;

  } 
* html #container{height:100%}

If you can't access that css file then you will have to over-ride the height in a file you can access.

e.g.

#container {
   height:auto!important;
   min-height: 100%;
} 
* html #container{height:100%!important}

Thank you Paul For your help that worked perfectly