2 div's 100% layout challenge

[jgbranco]

Hi there, I wonder if anyone can help me... I'm quite new on css, i'm trying to change to a tableless layout and i'm stuck on a problem I didn't have with tables. I really need to know if there is a way of using a 100% of the height for example (could be the width too) divided on a div that has a pixel value and div with percentage value, cause I have a layout that has a container that occupies a 100% of the page's height and inside it we have 3 di'vs, the first is the header witch should have a specified height value in pixels the other is a content div witch should have a percentage value and the other div is the footer that should have a pixel value, that means if the content doesn't fill the page the middle div, the content div should spread. Every time I use these pixel values and the percentage value it shows me the scrollbar I don't want it!
Can anyone help?

You can take a look at what i'm talking about in this link:
http://www.jgdesign.com.br/acv/acv_portugues.html

[Paul O'B]

Hi,

Read the faq on 100% height and then the faq on putting a footer at the bottom as these should answer your questions.

You can use repeating background image to imitate full height columns.
e.g.

http://www.pmob.co.uk/temp/3col-centred-template7.htm

See the 3 col demo sticky thread for more examples and explanations .

You can only use the 100% height routine once on a main wrapper therefore you just overlay your header and footer inside this 100% using the footer technique mentioned above.

The above examples should show you what to do but post here if you can't get it to work

[jgbranco]

There is one other problem, I didn't understand those negative margins that you put there to push the footer down, when I putz those margins on my css it destroys the layou positioning the div's out of their position. In firefox it pushes the div down but the container doesn't extend, and in internet explorer it just doesn't push the footer down.
Can you help me?
Thanks!

[jgbranco]

Help please!!!!
You can visualize the problem on:
www.jgdesign.com.br/acv/acv_portugues.html

[Paul O'B]

It Looks to be working for me so I assume you have fixed it by now

[jgbranco]

No, on firefox it pushes the footer but maintains the container on the same size it is not expanding the container, and in internet explorer it just doesn't push the footer!, What it happening?
Why does these things have problems with me aaaaaaaaaaahhhhhhhhhhh
Can you test it on both browsers to see what i'm talking about please?
To understand better what I think is happening is that in FF i'ts no pushing the container and the clearfooter and in IE i'ts not pushing the footer but i'ts pushing the container....
Thanks!!

[Paul O'B]

HI,

You missed out the most important bit that was explained in those links I gave you

You have to use min-height:100% on your wrapper or it won't expand which is what is happening in firefox and ie7.

You just give ie6 the height:100% using the star selector as follows.

#tudo {width: 760px;min-height: 100%;padding: 0px;margin: 0 auto 0 auto;border: none;
margin-bottom:-87px;background-image: url(http://www.jgdesign.com.br/acv/imagens/fundo_conteudo.gif);
}
* html #tudo{height:100%}

Remember that when you set a height then that is all will you get so you can't set a div to be 100% high and then want it to expand even bigger. IE6 treats height like min-height and will always expand the height to accommodate the content.

The above should fix the issue you were experiencing as long as we were talking about the same thing