6 Replies Latest reply on Mar 29, 2013 12:08 PM by mhollis55

    Getting a sidebar to go top-to-bottom

    Gotcha Man

      I'm working with the three-column, header, and footer page (from "new pages") in Dreamweaver (on my Mac), and I want the left sidebar (in a solid color) to go all the way to the bottom of the page, but it doesn't. It stops before the footer. I miss "frames" in GoLive. How do I do this?

        • 1. Re: Getting a sidebar to go top-to-bottom
          Nancy OShea Adobe Community Professional & MVP

          No. You don't miss frames.  


          What you want are equal height CSS columns.  There are a few different ways to approach this, depending on your project and the content you will be working with.



          Option #2 Faux Columns are the simplest (one 3-toned background image).

          Option #5 JavaScript from PVII is another good choice if you don't wish to use background images.



          Nancy O.

          • 2. Re: Getting a sidebar to go top-to-bottom
            ALsp Level 4

            This might be helpful:




            Al Sparber - PVII


            The Finest Dreamweaver Menus | Galleries | Widgets

            Since 1998

            • 3. Re: Getting a sidebar to go top-to-bottom
              mhollis55 Level 4

              Al's technique works. He uses that in his style sheets that he sells and I haven't seen anything he has built "break" yet.


              There is a simpler way and Al's templates used to use that, as well.


              According to HTML, a div will grow or contract based on what's in it. So, if you don't have any text in a sidebar or column, it shrinks to fit available text. If you are using a solid color for that to make it stand out, the color will end at the bottom of the div giving you results that are not optimal.


              So you can "cheat."


              Create a div that holds all of your columns and place those columns inside that div. Make a background for that "holder" column that has the colors you want and make your background just a few pixels high and have it repeat-y.


              Like this:


              #colContainer {   





              Now your side columns, if you have lined them up appropriately to the background, will always look like they run the entire length of the page and your <div id="colContainer"> will expand or contract depending on the text within it in any of the columns inside, so your background will always extend to the bottom of the tallest column for all columns inside that container.

              • 4. Re: Getting a sidebar to go top-to-bottom
                Gotcha Man Level 1

                "No. You don't miss frames.   "


                Actually, I kinda do. Then again, I also miss that redhead from my college days, and that didn't end well, either, so... Yeah.


                Thing is, I want to put the menu of links in that sidebar, and with a frameset it loads once and it's done -- with this? Not so much.


                And all this "div" stuff... I still have NO idea what that is.


                I've only been working with Dreamweaver for... oh, about five hours, now. Since I did a few websites a few years ago (hurrah, GoLive!), I got volunteered to be the Lodge's new webmaster, and we need a new website. But Dreamweaver is kicking my butt since what I *want* to do I *thought* I knew how to do... but apparently, I don't anymore.


                I loved GoLive. Sigh.


                Ah, never mind. I figured out how to do it. I just put a 5px-tall background image in the container (or whatever it's called... grrr) the width that I need, with the left-most 180px the color I needed, leaving the rest white, and set it to repeat-Y. Solved everything.

                • 5. Re: Getting a sidebar to go top-to-bottom
                  Nancy OShea Adobe Community Professional & MVP

                  Thing is, I want to put the menu of links in that sidebar, and with a frameset it loads once and it's done -- with this? Not so much.

                  You should Server-Side Includes.



                  I use an SSI for my site wide menus.  Edit one file, upload to server and voila!  The server automatically updates all the pages.  SSIs are a big time saver & so much better than frames!




                  Nancy O.

                  1 person found this helpful
                  • 6. Re: Getting a sidebar to go top-to-bottom
                    mhollis55 Level 4

                    Nancy uses server-side code to include menu files (that are HTML) and, when I was first learning (with Dreamweaver CS3) I could never see what I had included, I just saw a little code icon. Drove me nuts.


                    I purchased a few packages to make life easier and learned a lot from a set of sites I bought from WebAssist WebAssist uses Dreamweaver's Templates to handle larger websites and to effortlessly create a whole host of pages from them. When I started designing my own pages, I looked at what WebAssist did and adopted Dreamweaver Templates into all of my websites that could benefit from them.


                    To do exactly what Nancy's talking about, but without Server-Side include code, I simply open the Template file (which ends in .DWT and not .HTML) change the navigation (or anything that is common to all pages, like the footer) and every other page on the website will change if I tell the template to update all pages based on that template.


                    Then, when I look at any of the pages in Dreamweaver, I don't have little code icons instead of my navigation.


                    I don't remember what I used back in the 1990s to make a couple of websites, but it might have been GoLive. I did Table layouts for pretty much everything and didn't like how pages had to reload everything when switching menus, so I changed the site to frames. When I did that, my menu structure never had to reload.


                    But that was back in the day when web browsers were not doing intelligent caching, I did not use style sheets and only the smarter designers used divs for their pages. Also, the best speed most people had was from a 56k modem.


                    Browsers are a lot more intelligent these days. People have more RAM on their computers and browsers are happy to utilize that to cache style sheets. Browser rendering nowadays is lightning fast. I think the old sites I built back then would never exhibit the type of loading artifacts that they did back in the 56k-era.