Wed, 2004-11-10 22:40
Thought I'd play around with a % based layout 
The test page is here http://www.redhorseoil.com/test/percentlayout.html
It almost works in FF and works just about perfect in IE6.... in FF part of the yellow container bleeds in between the header and horznav divs.
If you leave the content div at 60% and the content is greater than that amount it overflows in FF but not in IE.
Setting the content div to height: auto cures that but then the design will break at 800x600
I've read all sorts of ideas and hacks in the forum regarding height, min-height etc but none seem to quite do the trick... so I am back at just a basic percent based layout...
Any ideas on what I should try?
Thu, 2004-11-11 00:30
#1
% based layout
Hi rmfred,
I'd try using min-height and only giving IE height values like:
* html #container{height:100%;}
* html #leftco{height:50%;} Hope that helps
Thu, 2004-11-11 00:47
#2
% based layout
Tony;
I had already given that a go but it didn't seem to solve all the problems... then I had footer problems..
So... I decided to try something else...
I put the height of the leftcol and contents at auto; and
enclosed the leftcol and contents div's in a wrapper with width of 100% and height of auto and floated it left...
then I floated the contents div left.. it previously was not floated, just the leftcol was floated and contents had a left margin that was larger than the width of the leftcol...
this worked fine except the footer was not positioned at the bottom of the container div...
So.. instead of giving the other divs heights of 10% (upperbar, header, horznav, and footer) I gave them heights of auto...
that seems to have done the trick..
it looks identical in FF and IE6... probably sucks in other browsers
take a look and let me know
thanks for your reply
Thu, 2004-11-11 05:28
#3
% based layout
Quote:
There is seldom reason to set height. Scott Sauyet's footer demo is one example of reason to use height values. As well designed as that is, it still fails in Opera, Safari, and IE/Mac.
I've read all sorts of ideas and hacks in the forum regarding height, min-height etc but none seem to quite do the trick... so I am back at just a basic percent based layout...
The other exception to the general rule is the occassional fixed size, fixed content box that is arbitrarily located.
The common usage I see around the web is folks apparently laying out on a grid; either because they come from a table-layout or a print medium background. If you're going to take full advantage of structured, semantic html + css in a web environment, it implies taking full advantage of the flow. The web ≠ print.
cheers,
gary