I'm still having trouble with understanding full width/height layouts in CSS. Could someone have a look below at my sample and help me clear up my understanding.
Thanks. -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Alec A. Lazarescu Sent: Thursday, March 02, 2006 3:01 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Full height and fixed width col issue Thanks for your help. I wish I could tell you why there's 100% mania, but I've long given up trying to get in the mind of the designers that foist this on me. :) The point about 100% equalling the viewport and staying the same whether it fits or not made the result make sense. Coming from a table world, 100% takes up the rest of available space there and not the viewport all the time. I've modified the code to move all the main ID code inline (the inline floats left are just there as placeholders for internal content). This prevents oddities, but puts me back at square one when it comes to getting 100% stretch working properly I couldn't get min-height to do anything for me either in FireFox or in IE with one of the hacks for it (http://www.dustindiaz.com/min-height-fast-hack/). The height of the left ID didn't change at all. I need the left area grey to the bottom so I know it's taking up the full 100%. I believe I need the blue and green content and content footer stretched to max width (100%-165 somehow) and the content to be stretched to 100%-header height-footer height. Otherwise I won't have background setup properly and I also won't be able to center items within the content area if they are taking the minimum width and height possible. Thanks for any light you can help shine on this. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; > <head> <title>Untitled Page</title> <style type="text/css"> html,body { margin: 0px; } #header {background-color: red} #left {background-color: gray; width: 165px; float: left; margin: 0px; padding: 0px; } #content {background-color: blue; float: left;} #footer {background-color: green; clear: both} #leftnavcontainer { float: left; } DIV.clear { clear: both; float: none; height: 0px; width: 0px; /* needed to prevent overflow expand on IFRAME shim hack of RadMenu */ overflow: hidden; } </style> </head> <body> <div id="header">Header</div> <div id="left"> <div id="leftnavcontainer"> <div style="float: left;"> Some stuff in left </div> <div class="clear"> </div> </div> <div class="clear"> </div> </div> <div id="content"> <div style="float: left"> Content</div> <div id="footer"> Content only footer</div> </div> <div class="clear"> </div> </body> </html> -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Zoe M. Gillenwater Sent: Wednesday, March 01, 2006 4:02 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Full height and fixed width col issue 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/ ______________________________________________________________________ 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/ ______________________________________________________________________ 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/
