Jump to content

Automatically clearing nav bar - help!


willtudorevans

Recommended Posts

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.

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...