Hi Alec,
Alec A. Lazarescu wrote:
>I'd like a header, a left bar with a fixed width of 165 and 100% height,
>a content area with width the remaining window width 100% and height
>100% and a content footer (only on bottom of content, not the whole
>bottom with the left bar).
>
>
I have a question for everyone wanting to know about creating 100% high
pages: why? Where has this fad come from? I'm just curious about the
100% high rabidness lately. :-)
>With height 100% I'm having a problem with a vertical scrollbar
>appearing for no reason
>
Oh, it's there for a reason. :-) You just don't understand the reason yet.
>and with width 100% on the content, it's going
>to the next line instead of using 100%-165 to take up the full remaining
>space.
>
You haven't told anything to be "100%-165px".
I've added notes about a few of lines of your CSS and HTML that you are
not fully understanding. Hopefully this will get you on your way to a
100% high page.
>html,body {
> padding: 0px;
> margin: 0px;
> width: 100%;
> height: 100%;
>}
>
>
The height: 100% means "make the html and body elements as high as the
viewport and never any higher/longer." You probably want a minimum
height of 100% instead.
>#left {background-color: gray; width: 165px;}
>
>
If you want #left to be on the same line as #content, you need to tell
it to. Add float: left.
>#content {background-color: blue; width: 100%}
>
>
You're telling #content to take up the whole viewport width and leave no
room for #left, so it has to sit on a line below #left, even once #left
is floated. Get rid of the width and add margin-left: 165px.
> <div id="left" style="float: left; margin: 0px; padding: 0px;
>height: 100%">
>
>
Oh wait, you are floating #left. Why are you using inline styles, and
even worse, splitting styles between inline and embedded? Keep them all
embedded while developing, then move them to an external sheet. Much
easier for you and those of us trying to help you. :-)
The height here means "make this div as tall as its parent and no
taller, no shorter." The parent is the body, which is as high as the
viewport, so the left div is going to be as high as the viewport -- even
if it begins very far down the viewport, or outside of the viewport
altogether. So if the header takes up space, and then a div comes after
it that is as high as the viewport, you will get a vertical scrollbar.
> <div id="content" style="float: left; height: 100%">
>
>
If you're going to float #content too, ignore what I said earlier about
giving this div a left margin. But do get rid of its width: 100%
declaration.
Same comments about 100% height apply to this div.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
