I just had a container alignment question solved (thanks VimF!) and now just have a hypothetical question. I have a navigation bar that runs down the left side of the screen. Right now the bar is sized to exactly fit the height of the content container. What if my content is longer on some pages than others? How can I make the navigation bar change sizes (and be filled in with the darker blue) depending on how long the content container is? I've attached a screen shot so you can see what I mean. Any help or thoughts are appreciated greatly! Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>The Polacek Center for Plastic Surgery</title> <style type="text/css"> * { margin: 0; padding: 0; } /* CSS for page */ body { background-color: #99b7d3; font: .8em/1.3em verdana,arial, helvetica, sans-serif; } li img { vertical-align: bottom; } #wrap { width: 950px; } #navcontainer { float: left; background-color: #99B7D3; height: 513px; padding-left: 50px; } #flashcontent { float: left; width: 750px; height: 513px; line-height: 250px; text-align: center; margin: 10px; background: #99b7d3 url(graphics/collage.jpg) center; } .style3 {font-size: 0.8cm} /* CSS for navigation system */ #nav, #nav ul { /* all lists */ padding: 10px 0 0; list-style: none; float: left; width: 120px; } #nav li { /* all list items */ position : relative; float : left; line-height : 58px; margin-bottom : -1px; width: 95px } #nav li ul { /* second-level lists */ position : absolute; display: none; margin: -68px 0 0 130px; } #nav li a { width: 120px; w\idth : 120px; display : block; color : #FFF; font-weight : bold; font-size: .8em; text-decoration : none; background-color : #7697b9; border : none; padding : 0 0.5em; } #nav li a:hover { color : white; background-color : #98b5ce; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { display: none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */ display: block; } </style> </style> <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script> </head> <body> <div id="wrap"> <div id="navcontainer"> <ul id="nav"> <li><a href="#">home</a></li> <li><a href="#">meet dr. polacek</a></li> <li><a href="#">face</a> <ul> <li><a href="#">face lift</a></li> <li><a href="#">eye lift</a></li> <li><a href="#">brow lift</a></li> <li><a href="#">neck lift</a></li> <li><a href="#">laser resurfacing</a></li> <li><a href="#">otoplasty</a></li> </ul> </li> <li><a href="#">body contouring</a> <ul> <li><a href="#">abdominoplasty</a></li> <li><a href="#">thigh lift</a></li> <li><a href="#">arm lift</a></li> <li><a href="#">liposuction</a></li> </ul> </li> <li><a href="#">breasts</a> <ul> <li><a href="#">breast implants</a></li> <li><a href="#">breast reductions</a></li> <li><a href="#">breast lift</a></li> <li><a href="#">gynecomastia</a></li> </ul> </li> <li><a href="#">non-surgical</a> <ul> <li><a href="#">botox</a></li> <li><a href="#">thermage</a></li> <li><a href="#">restylane/perlane</a></li> <li><a href="#">juvaderm</a></li> <li><a href="#">collagen</a></li> <li><a href="#">phototherapy</a></li> </ul> </li> <li><a href="#">skin care</a> <ul> <li><a href="#">micropeels</a></li> <li><a href="#">microdermabrasion</a></li> <li><a href="#">skin care products</a></li> </ul> </li> <li><a href="#">before and afters</a></li> <li><a href="#">contact us</a></li> </ul> </div> <div id="flashcontent"> </div> </div> <script type="text/javascript"> // <![CDATA[ var so = new SWFObject("polacek.swf", "polacek", "750", "513", "6", "#FFFFFF"); so.write("flashcontent"); // ]]> </script> </body> </html> Code (markup):
This question gets answered EVERY SINGLE DAY that's why I think there should be a sticky in the CSS Forum with common questions/answers and another checkbox when making a thread in CSS that says, did you read the sticky for common questions/answers. What you're lookin for is faux columns (google it).
It becomes a little difficult to search for something when you're not sure what it is that you are searching for. Thank you for your assistance.
Yup, what you need is faux column: The CSS body { font: .8em/1.3em verdana,arial, helvetica, sans-serif; background: #99b7d3 url(bg.gif) 50px 50px repeat-y; } Code (markup): And the background image:
You sure 'bout putting it on the whole body tho? And won't it not start 50 from the top / 50 from the left..? Wouldn't it start at the top? I could be wrong on the top part..