3 replies [Last post]
rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Thought I'd play around with a % based layout Smile 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?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 18 hours 55 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

% 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

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

% 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 Smile

take a look and let me know
thanks for your reply

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 38 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

% based layout

Quote:
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...
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.

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.