Forum Moderators: not2easy
I have a horrible feeling this has to do with netscape7 following inheritance rules to the max. However, lets have a go anyway...
overall
width set to 590px
(then nested)
middle column
width set to 75%
-- must be a percentage value 'cos it must reflow on window resize --
ie6 does exactly what I want, op does exactly what I want, Netscape7 seems to have decided that the page width is WAY over to the right hand side somewhere that has nothing to do with anything.
Any advice would be v. welcome for this struggling newbie.
cheers
Mandy
IE tends to pick up what you are trying to do, but NS always needs a helping hand :)
Also can you post a snippet of stripped down CSS, is the width set on the body or a container div?
Suzy
Don't wait until the hour is late to rectify....
I find it best to design in NN7 and Opera, then later modify it for IE ,such is life that we still have to use hacks for it! :(
Suzy
Pricey: I didn't want to set fluid values for outer columns, because I wanted them to "stick" in place.
drbrain: yes, xhtml transitional. All pages validate.
suzyuk: css validates.
sinclairuser: me too! I was returning to finished pages to correct a flaw with my original design concept (designed primarily for 1024x768 and needed to change that to 800x600 - and yes I know this was stupid, won't make that mistake again!) and I had already solved this particular problem (somehow?!?) only to find it reappeared when I made a change (somewhere?!? now tell me that doesn't happen to everyone!).
Current ugly solution:
I'm setting a % width in container div for mid col.
Then I'm setting another %width in all the formatting div's that are used in that column. I just don't "get" why this should be necessary. And that's what I meant by thinking it's because I hadn't got my head round width not be an inherited value, because that doesn't seem logical to me.
Additionally, what I really don't understand is what the %width in container div is relating to. i.e. percentage of what? It seems an arbitrary width. Width of browser window?
Cheers
Mandy
That by using ugly method, I'm not achieving a very nice look when browser window is resized, too much white space, because now the percentage values are different. It'll do, I guess, but it ain't pretty.
Cheers
Mandy
Additionally, what I really don't understand is what the %width in container div is relating to. i.e. percentage of what? It seems an arbitrary width. Width of browser window?
initial(default) value of width is "auto" which means the body element will fill the viewport and all other child elements will be a percentage of the viewport, if percentages is what you're using.
If you specify a measurement on your body element then the percentages will calculate from that width instead.
You shouldn't need to set the percentages on each div inside your container div because width is an inherited value..
PS: I notice from your first post you set width of 590px, then said that window had to flow on resize.. it won't ever get less than 590px (at least until max-width is supported better)
Suzy
Thanks for all that.
Misprint in "CSS pocket reference" says width not inherited! Thought that didn't make sense :).
I took your advice and set width in body. Then changed center column to position relative with width as a percentage. Finally got all three browsers to look the same by doing that! That was great :) but...
...column doesn't resize with window, which it should.
Plus pipes at bottom of page of ie and nn have fallen out of window.
This is getting me down today. So I think I'll take a break from it.
Thanks again for your help.
Cheers
Mandy
glad the first bit helped, regarding the not resizing, I did make reference to that in the PS:
PS: I notice from your first post you set width of 590px, then said that window had to flow on resize.. it won't ever get less than 590px (at least until max-width is supported better)
to clarify: as soon as you specify a unit of measurement, the page will no longer "flow".. the width of the page will be constrained within the 590px size but it will not get smaller than this. i.e. it's not fully liquid
Suzy
Just to clarify....
So no column will reflow on viewport resize if I have set a definite width in body? Even if I set one or more of the column's width as a percentage?
If this is right, then...
How does one create a mixed fluid and static page layout?
Having actually managed to do this once (though not beautifully!), I'm now getting a little confused.
Cheers
Mandy
If you're after a "box" in the center of the screen regardless of the viewport size then you're back to what you termed your "ugly" solution. (only it's not ugly)
Use a container div for the box, with e.g. width 75%, that will be 75% of the viewport, then if within that container you then want 3 columns where only the center div is fluid? center it in your container and give it fixed margin widths, then you can either float or absolutely position the left and right columns into/onto these margins..
this will produce a fluid center column that will always have a fixed margin on either side so the left/rightcolumns don't get obscured unless the viewport becomes very narrow..
Same theory can be used for two columns
Suzy
Just to finish this off...
Having now used the principals that Suzy outlines, towards the end of these posts, on a new site. They are working perfectly and logically (thank g.).
The other pages, well, they're not perfect, but will do for now, I'll go back and take it apart perhaps one day and see where I went wrong, but it was only a css learning design project and I learnt a heck of a lot from doing it.
Thanks to everyone for their help and especially Suzy for responding well beyond the call of duty.
Cheers
Mandy
