CODEWITHSUNDEEP
csshtmlparent
leigero
leigero

Reputation: 3283

How do I make all child <div>s expand to the length of parent div when one child causes parent to expand?

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;
}

Upvotes: 0

Views: 844

Answers (3)

maksbd19
maksbd19

Reputation: 3830

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>

Upvotes: 1

Jarvklo
Jarvklo

Reputation: 41

What is your browser scope? (ie - which browsers are your visitors using?)

If you leave out IE7, you could solve the problem by using CSS tables like this...

  1. Move the #footer out of the #body-area
  2. Set display: table-cell on the #body-area
  3. Replace "float: left" with "display: table-cell; vertical-align: top" for the four children (#body-left, #body-right, #content-area and #sidebar)
  4. Remove the heights of the four children - A nice thing about CSS tables for these types of layouts, are that the cells of a table expand vertically together

A bad thing about this solution is that it does not work in MISE7 (but you could serve a separate Javascript to IE7 with eg. a conditional comment if you don't want to exclude those users)

Works in "all modern browsers" (including IE8) though :)

So try it out:

<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.
      enough text here to cause the div to expand beyond browser height.
      enough text here to cause the div to expand beyond browser height.
      enough text here to cause the div to expand beyond browser height.
      enough text here to cause the div to expand beyond browser height.
      enough text here to cause the div to expand beyond browser height.
    </div>

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

</div>

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

and

#body_area{
    overflow:auto;
    width:1024px;
    height: 768px; /* just a sample value */
    margin:0px auto;
    clear:both;
    display: table;
}

#body_left{
    width:25px;
    margin:0px;
    background:url("http://www.leigero.com/div_expanding_issue/images/body_left.jpg") repeat-y;
    display: table-cell;
    vertical-align: top;
}

#body_right{
    width:28px;
    margin:0px;
    background:url("http://www.leigero.com/div_expanding_issue/images/body_right.jpg") repeat-y;
    display: table-cell;
    vertical-align: top;
}

#sidebar{
    width:213px;
    margin:0px;
    background:url("http://www.leigero.com/div_expanding_issue/images/side_menu.jpg") repeat-y;
    display: table-cell;
    vertical-align: top;
}


#content_area{
    width:758px;
    margin:0px;
    background:url("http://www.leigero.com/div_expanding_issue/images/content_area.jpg") repeat-y;
    display: table-cell;
    vertical-align: top;
}


#footer{
    height:34px;
    width:1024px;
    margin:0px auto;
    background:url("http://www.leigero.com/div_expanding_issue/images/footer.jpg");
}

Upvotes: 0

leigero
leigero

Reputation: 3283

After trying EVERYTHING (or so it seems) I finally realized that the best (and probably only) way to make 3 plus columns expand to the height of the longest column is to not use DIVs but instead use a table.

DIVs have their purpose and they're handy but a table automatically expands exactly the way I wanted DIVs to expand but a table doesnt require floats and such to be in line either. A quick table inside a DIV made that super simple

<div id="body_area">
    <table id="content">
        <tr>
            <td class="lmargin"></td>
            <td class="sidebar"></td>
            <td class="content_area">
                <div id="content_area_content">
                </div>
            </td>
            <td class="body_right"></td>
        </tr>
    </table>
<!-- Footer area -->
<div id="footer"></div>
</div>

This way the table expands all columns of equal height and within the table data I can add another DIV to edit the margins and all the other attributes of its content.

Upvotes: 0

Related Questions