Wed, 2003-06-25 20:10
:roll: I have what seems to me a very simple idea for a layout.
a top div section for a logo which is 80px high, 100% wide
a left div section for a navbar which is 200px wide 100% high
another div section for content which is 100% high and 100% wide and will resize and add vertical scrollbars as necessary
I have a test page at http://web.mit.edu/windows-delivery/www/test.html
right now the left navbar stops randomly if you scroll down! I tried inserting a overflow: auto; into the class definition for middle (the content div thing) and that fixed the left navbar randomly stopping at some point, but it added a little extra scrollbar next to the middle section while keeping both horizontal and vertical scrollers on the browser window itself.... arg!
which leads me to the second problem - the 100% width for the middle section seems to extend well beyond the edge of the page instead of lining up neatly underneath the 100% width top logo section. It extends out too far exactly the width of the navbar. Does this have something to do with relative vs. absolute positioning? or the float or clear properties, which I dont' understand?
ideally I would do away with the browser scrollbars altoether and just have vertical scrollbars appearing next to the middle section as necessary (presumably horizontal ones would never be necessary once this too wide issue is fixed) but I can't seem to make that work.
Wed, 2003-06-25 20:24
#1
terrible trouble with 100% widths and heights and scrolling
Look at it this way. You've got a browser window, say 800px wide.
You set a div to 100%. Voila, 800px.
Then you shift it right by 200px. Width is still 800px remember... 200px sticks out the right hand side of the screen.
(I think) the way around this is not to set a width, it's to use right:0; with the left:200px; which set where the left and right sides of the div are.
Note this also happens with the navbar, where the height is 100% and is moved down 80px.
As for the left navbar extending further down... my suggestion (as always!) is that if you need a background image/color all the way down, set it as the page background... you won't get two divs to have the same length, if one has 'variable' content in it.
Fri, 2003-06-27 08:01
#2
terrible trouble with 100% widths and heights and scrolling
Follow-up, since my post [url=http://www.csscreator.com/css-node/
Setting both left and right works in Mozilla (and probably others), but not in IE, unfortunately.