Hi all, this was brought about by my post in the website review forum. Okay, I'm experimenting and need a bit of help. http://upontherainbow.com/test/test.html Right now I have that darker blue side bar. How do I make it go the entire length of the page, yet be flexible? For example, if the page itself is 500 pixels, I don't want the darker blue to stop at 400px nor to make the page 600px (if I set the height at 400 or 600 respectively.) If I don't set a height at all, it disappears completely.
Ohh so you want it to be 100% tall and expand/contract with the window? Good luck. I've yet to figure this out and all the logical code doesn't work. Not with Firefox anyways.
This is straight-forward for modern browsers[1], but IE is not a modern browser, so another method is required. The simplest is to use the faux column technique. A simple minded example may be seen at my two column—apparent equal height demo. cheers, gary [1] Three column layout for modern browsers; obsolete browsers (IE) don't fully support the display property.
kk5st is right, you have to use faux colums. You would create an image and apply it as a background to the body selector.
I don't know what mistake I'm making but the sidebar.jpg file will not show up on the page. The test page is linked above; the CSS file is here. http://upontherainbow.com/test/test.css
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-us"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii"> <style type="text/css" media="screen"> BODY { height: 100%; margin: 0; } #Menu { position: absolute; top: 0; left: 0; width: 150px; height: 100%; border-right: 2px solid silver; background-color: rgb(245,245,245); } #Page { border: 1px dotted red; margin: 8px 8px 8px 160px; } </style> </head> <body> <div id="Page"> <div id="SiteTitle"> <h1>Hello, World!</h1> </div> <div id="Menu"> <h2>Menu</h2> <ul> <li><a href="One">One</a></li> <li><a href="Two">Two</a></li> <li><a href="Three">Three</a></li> <li><a href="Four">Four</a></li> <li><a href="Five">Five</a></li> </ul> </div> <div id="PageText"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut magna. Nulla diam est, varius sit amet, blandit et, rhoncus at, nisi. Cras ut dolor. Proin blandit, diam non laoreet molestie, diam nisi tincidunt felis, nec facilisis nulla augue eget ante. Aliquam at tellus ac justo ornare bibendum. Pellentesque consequat, enim quis ultricies ornare, odio dui varius justo, a porttitor urna massa eu mi. Nam fermentum. In scelerisque mattis ante. Ut nunc. Quisque sed quam. Suspendisse vitae enim sit amet lacus bibendum scelerisque. Aenean mattis, nulla eget dignissim congue, magna lacus imperdiet justo, sed pulvinar velit eros ac arcu. Ut arcu ligula, tincidunt in, semper sed, pretium id, urna. Aenean mattis felis lacinia lectus. Cras diam magna, consequat non, rhoncus in, consectetuer eget, leo.</p> <p>Phasellus dapibus. Praesent blandit, diam ut tincidunt vehicula, ipsum nunc pretium est, eu gravida ligula metus sit amet lacus. Vestibulum ullamcorper, metus sit amet elementum tempor, quam velit vestibulum purus, vitae venenatis purus mauris eu ipsum. Maecenas ut nulla non massa gravida tristique. Praesent vitae ante. Duis mollis nulla in nisi. Nulla massa nisl, dignissim a, sagittis eget, adipiscing in, turpis. Ut lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam ut odio. Sed molestie metus ac quam. In eget risus et lectus ultricies sagittis. Aenean ullamcorper nulla ultricies dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus congue volutpat odio. Donec porttitor egestas sapien. Ut felis. Vivamus non tellus eget tortor faucibus sodales. Duis nisl dolor, dapibus ut, fringilla feugiat, rutrum in, sem. Proin ultricies nisl a libero.</p> </div> </div> </body> </html> HTML: