I’ve seen this question asked a hundred times and I’ve tried all the solutions

Question

0

Asked: June 9, 20262026-06-09T12:36:12+00:00 2026-06-09T12:36:12+00:00

I’ve seen this question asked a hundred times and I’ve tried all the solutions

0

I’ve seen this question asked a hundred times and I’ve tried all the solutions given and I still haven’t managed to get this to work.

The problem: I have a parent DIV with four child DIVs two with content, two only for looks:

([site shadow] [left menu] [content area] [right shadow])

When the content area has enough text to expand the content area I want the right shadow and left menu graphics to expand down the page with the rest of the DIVs.

I have tried adding a clear:both to the parent div and that does nothing. I’ll include the relevant code below.

I should add that the shadow on the right of the web page disappears completely when adding a height % to the parent DIV

Additionally if I add a very large height:4000px to the parent div everything cooperates like I want, although I want the site to re-size to content not just to 4000px.

The relevant HTML:

<div id="body_area">
  <div id="body_left"></div><!-- just a left page graphic -->

    <div id="sidebar">
      some info here
    </div>

    <div id="content_area">
      enough text here to cause the div to expand beyond browser height.
    </div>

    <div id="body_right"></div>  <!-- just a right shadow graphic -->

    <div id="footer"></div>
</div>

And the relevant CSS

#body_area{
    overflow:auto;
    width:1024px;
    margin:0px auto;
    clear:both;
}

#body_left{
    height:516px;
    width:25px;
    margin:0px;
    background:url("images/body_left.jpg") repeat-y;
    float:left;
}

#body_right{
    height:100%;
    width:28px;
    margin:0px;
    background:url("images/body_right.jpg") repeat-y;
    float:left;
}

#sidebar{
    height:100%;
    width:213px;
    margin:0px;
    background:url("images/side_menu.jpg") repeat-y;
    float:left;
}


#content_area{
    height:100%;
    width:758px;
    margin:0px;
    background:url("images/content_area.jpg") repeat-y;
    float:left;
}


#footer{
    height:34px;
    width:1024px;
    margin:0px auto;
    background:url("images/footer.jpg");
    float:left;
}

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-09T12:36:13+00:00

If you need a pure css solution then it’ll be very difficult to achieve. But to get this done easily you can use jQuery.

edit: adding jquery library from a jquery cdn [this will word only when you have active internet connection-in case you didn’t know it]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
            var h1 = $('#sidebar').height(),
                h2 = $('#content_area').height(),
                maxNum = ( h1 > h2 ) ? h1 : h2;

            $('#body_area').css('height', maxNum);
        });
</script>

this works well. But there is a little problem, you have to readjust the width of the divs inside the body_area div.
Thanks

EDIT: Full code

<!DOCTYPE html>
<html>
    <head>
        <title>Lessons by Larissa</title>
        <link rel="stylesheet" type="text/css" href="http://www.leigero.com/div_expanding_issue/style.css" />
        <link class='webFontsCSSLink' href='http://fonts.googleapis.com/css?family=Comfortaa|Pacifico|Dancing+Script' rel='stylesheet' type='text/css'>
    </head>
    <body>
    <!-- Header area -->
        <div id="header_area">
            <div id="title_box">
                <div id="title_text"><h1></h1></div>
            </div>

            <div id="banner">
                <div id="banner_text">
                    <font color="#fff" face="'dancing script', arial, sans-serif" size="4">
                        Learning music is a motion of the mind…, a flowing of harmonious notes, on a wisp of melodious air. <p class="quote">-M.O'Malley</p>
                    </font>
                </div>
            </div>
            <div id="header_right"></div>
            <div id="header_left"></div>
            <div id="title_image"></div>
            <div id="nav_bar">
                <div id="nav_bar_text">
                    <!-- This is where all of your upper menu items are located. You can add more or remove the links by copying and pasting more in the appropriate sections -->

                    <ul id="nav"> <!-- This begins all the links in the top menu bar -->
                        <li class="home"><a href="http://www.leigero.com/lessons">Home</a></li>
                        <li>
                            <a href="#blah2.html">About</a>                        
                            <ul><!--Sub menu for 'Home.' These are the links that appear when you hover over 'home' -->
                                <li><a href="#1.html">Philosophy</a></li>
                                <li><a href="#2.html">Pricing</a></li>
                                <li><a href="#3.html">Add as many links as you want</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#blah3.html">Link 2</a>
                            <ul><!--Sub menu for 'Home.' These are the links that appear when you hover over 'home' -->
                                <li><a href="#1.html">Sub Link 1</a>
                                    <ul>
                                        <li><a href="#6.html">More Links </a></li>
                                        <li><a href="#6.html">More Links </a></li>
                                    </ul>
                                </li>

                                <li><a href="#2.html">Sub Link 2</a></li>
                                <li><a href="#3.html">Sub Link 3</a></li>
                            </ul>
                        </li>
                    </ul>

                </div>
            </div>
        </div>

    <!-- Body area -->

        <div id="body_area">
            <div id="body_left"></div>
            <div id="sidebar">
                   <p>ASLFKJASDFLSJDAFLSDKJKJFlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                   LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    </p>

            </div>
            <div id="content_area">
                    <p>ASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF 
                    LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF LDSAfjlkdfjsldkfjsdlfkjdsljASLFKJASDFLSJDAFLSDKJF </p>

            </div>
            <div id="body_right"></div>
    <!-- Footer area -->
                <div id="footer"></div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                    var h1 = $('#sidebar').height(),
                        h2 = $('#content_area').height(),
                        maxNum = ( h1 > h2 ) ? h1 : h2;

                    $('#body_area').css('height', maxNum);
                });
        </script>
    </body>
</html>

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I’ve seen this question asked a hundred times and I’ve tried all the solutions

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply