Sticky footer issue

Question

I'm having problem with sticky footer trick. The problem is I want to fit the right border of left navigation menu (actually the border is left border of content div) to height of #container. But as you see on the given link, i can only see 20-30% of right border. How can i fix it? Please help

Link to page http://smiths-heimann.az/?page=2

Answer 1

--using background in css--

Use a bg image that is 1px high and 998px wide and has the "border" pixel inside it. That will solve this issue.

I made an example:

Add this line under #container in css:

background: url("http://www.elbowroom.co.il/test.png") repeat-y; (it works)

You can replace that later with your own bg.

--using jQuery-- You could define the height of the content to expand with the container's height.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function(){

            $("div#content").height($(div#container).height() - ???);
            $(window).resize(function(){
                $("div#content").height($(div#container).height() - ???);
            });
        });
    </script>

replace the question marks with the amount that is right for you.