Forum Moderators: not2easy
At the moment I am trying to achieve a re-design of my website in pure XHTML/CSS.
After many hours of tweaking and a little bit of help here and there, I now have a version that almost exactly matches my original html design save for a couple of issues.
I'm aiming to have a fixed sized header, 2 content boxes that fill the available height of the browser window and and a footer that sticks to the bottom of the browser,
I'm so very nearly there, except somethings not quite right.... I can get the container expanding in height with the browser window no problem, by setting the height attributes in the CSS and the height of the DIV in the html to 100% height ... except it's TOO big, the footer is waaay down the bottom and requires me to scroll down to it (not what i want)....AND... it doesnt work in mozilla...
so, after a bit more tweaking, I changed the %'s for em's and now mozilla works correctly... so far so good, now to get the content boxes and the footer to
remain in view all the time.... easy i think, just play about with the height attributes in the CSS and the DIV and everthing should be fairly straightforward.
But no! it doesnt work, whatever i do, i cannot get the main content coloumns and the footer to remain in view and fit to 100% height of the browser at the same time, I've tried every combination of % and EM's that I can think of, and can acheive both effects, but not at the same time.
also, in IE I have about 10px of white above the footer that i cant eliminate... If anyone can give me an explanation as to what is happening (im sure the two problems are related) I'd be very grateful.
I've been tweaking this code for two days now and am getting nowhere.
i'm getting closer all the time, i just need to understand whats happening here and I reckon i'll be ready to start putting the rest of the elements in like the navigation etc
Thanks very much to anyone who has the time to make a suggestion, its very much appreciated.
For reference, you can see the latest version here:
<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>
cheers
Mike
[edited by: SuzyUK at 5:40 pm (utc) on Nov. 17, 2004]
also, in IE I have about 10px of white above the footer that i cant eliminate...
That is I think related to a combination of the how IE treats clearance on the floats (3px Jog is possibly in play) and then subsequent collapsing margins (from your footer?).. but if you'd like to strip your code down to the basic float layout and it's CSS, with measurements, it might help :)
Thanks
Suzy
