I found this online: Moreover, notice the body element, it will need to have 100% height and also > to clear the floats we need to use the *overflow: hidden* option (for IE6 > there is a bug and the overflow need to be visible to work out)
from http://www.thechoppr.com/blog/2009/02/08/3-column-fluid-layout-100-height/ Good luck! On Tue, Feb 24, 2009 at 10:17 AM, Richard Aday <[email protected]>wrote: > You know, now that I think about it... you probably don't need overflow: > hidden. > > I don't have time to try it out so it's up to you! :) > > > On Mon, Feb 23, 2009 at 7:01 PM, peter <[email protected]> wrote: > >> >> Thanks, Richard! I tried putting it in the body tag and it worked. >> Nout sure I quite understand why, yet, but I think I will when I take >> a close look at it. >> >> Again, thanks. >> >> Peter >> >> On Feb 23, 3:45 am, Richard Aday <[email protected]> wrote: >> > Or, why don't you just set that background image on the body tag and see >> if >> > it does what you are looking for (Make sure you specify repeat-y). >> > >> > On Mon, Feb 23, 2009 at 12:42 AM, Richard Aday <[email protected] >> >wrote: >> > >> > >> > >> > > I answered this question about a week or two on this list: >> > >> > > Here is an example on how to do it. The trick is with the CSS rule >> for >> > >> html and body. >> > >> > >> *viewport.html* >> > >> > >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " >> > >>http://www.w3.org/TR/html4/loose.dtd";> >> > >> > >> <html> >> > >> <head> >> > >> <title>ViewPort Example</title> >> > >> <link rel="stylesheet" type="text/css" href="viewport.css"> >> > >> </head> >> > >> > >> <body> >> > >> > >> <div id="example">This div has 100% height and width of the >> viewport</div> >> > >> > >> </body> >> > >> > >> </html> >> > >> > >> *viewport.css* >> > >> html, body { >> > >> overflow: hidden; >> > >> height: 100%; >> > >> } >> > >> > >> #example { >> > >> height: 100%; >> > >> background-color: blue; >> > >> } >> > >> > > On Sun, Feb 22, 2009 at 5:46 AM, peter <[email protected]> wrote: >> > >> > >> I am trying to have a black vertical bar on the left of my web pages. >> > >> I want it to go to the bottom of the page. Here is the code I used in >> > >> the style sheet: >> > >> > >> #menu { >> > >> position: absolute; >> > >> top: 0px; >> > >> left: 0px; >> > >> padding: 10px; >> > >> height: 100%; >> > >> width: 200px; >> > >> background-image: url(/images/lefttile.gif); >> > >> background-repeat: repeat-y; >> > >> } >> > >> > >> "lefttile.gif" is a black square. The bar only goes part way down the >> > >> pages. >> > >> > >> Any help would be greatly appreciated! >> > >> > >> Thanks, >> > >> > >> Peter >> > >> > > -- >> > > -Richard Aday >> > >> > -- >> > -Richard Aday >> >> >> > > > -- > -Richard Aday > -- -Richard Aday --~--~---------~--~----~------------~-------~--~----~ -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected] -~----------~----~----~----~------~----~------~--~---
