willtudorevans Posted November 19, 2011 Report Share Posted November 19, 2011 Hi Guys, I've recently taken the Dreamweaver CSS course on KS and I have a question. I have a two column template with a navigation sidebar and a 'main' section for my content. Both of these have been set up with divs. The height of my main section is dependent on the amount of content on each page. How do I get the navigation sidebar to automatically adjust its height to mimic the height of the main section? I want to have them both clearing to the footer at the bottom of the page (or to at least look like that's what's happening). If this is not possible, are there any good ways around it? I guess I could have the body div background colour the same as the nav bar colour (or just not have a nav bar colour), but I would like to have them different. I hope this all sense. Many thanks in advance for your help. Percy ps the KS course was great by the way, taught me a lot. I'm now a full member of the library. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 19, 2011 Report Share Posted November 19, 2011 There isn't really a way to do that automatically unfortunately. It is possible with Javascript, but I personally try to avoid that if possible. In most cases, I'll have a div that surrounds the two columns, and give that an image background that repeats down the page to create the side column. Something like: <div class="content_wrapper"> <div class="content"></div> <div class="sidebar"></div> </div> .content_wrapper { background: url(your_bg_image.jpg) top right repeat-y; } This article does a pretty good job of explaining the process: http://www.alistapart.com/articles/fauxcolumns/ Quote Link to comment Share on other sites More sharing options...
willtudorevans Posted November 24, 2011 Author Report Share Posted November 24, 2011 There isn't really a way to do that automatically unfortunately. It is possible with Javascript, but I personally try to avoid that if possible. In most cases, I'll have a div that surrounds the two columns, and give that an image background that repeats down the page to create the side column. Something like: <div class="content_wrapper"> <div class="content"></div> <div class="sidebar"></div> </div> .content_wrapper { background: url(your_bg_image.jpg) top right repeat-y; } This article does a pretty good job of explaining the process: http://www.alistapart.com/articles/fauxcolumns/ Thanks for this Ben, helped a lot! Quote Link to comment Share on other sites More sharing options...
willtudorevans Posted November 28, 2011 Author Report Share Posted November 28, 2011 Just to follow this thread up. I recently watched a Chris Coyle video of a solution to this problem on CSS tricks. He proposed creating a photoshop picture of the desired background colour for the nav bar (with a right-lip of the background colour of the content div), and then in the body: background: url (images/navbar.png) repeat-y left; This worked out ok, but I feel the solution proposed by Ben is much cleaner and quicker. Am I missing something? Are there advantages to CC's methods that I haven't considered? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 28, 2011 Report Share Posted November 28, 2011 Am I missing something? Are there advantages to CC's methods that I haven't considered? As far as I understand it, both Chris and I are using the same exact method -- using a repeating background image to create the column. We may be implementing it slightly differently, or explaining it slightly differently, but we are both ultimately using the same technique. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.