Home/ Questions/Q 7278415
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T22:52:17+00:00

I have an issue with dynamically resizing the height of my sidebar div to

  • 0

I have an issue with dynamically resizing the height of my sidebar div to match the content div.
Based on various other questions here and google searches, I thought that without a height set, it would use the parent div height, but it seems to auto-fit the height to the content instead.

This can be seen on “baradineholdings.com.au” (please don’t judge the site, I’m a noob for one and I would rather get the basics working properly before I make it ‘pretty’).

The home page looks fine, mainly because of no content. If you head to the about page you can see the issue. I almost suspect that in the instance of the main page, the content div is taking the height of the sidebar div, but I’m not sure why.

HTML;

<body>
    <div id="wrapper">
        <?php include('includes/header.php'); ?>
        <div id="internal">
            <div id="sidebar">
                <h3>Navigation</h3>
                    <li><a href="index.php">Home</a></li>
                    <li><a href="about.php">About</a></li>
                    <li><a href="gallery.php">Gallery</a></li>
                    <li><a href="contact.php">Contact</a></li>
            </div> <!-- end #sidebar -->
            <div id="content">
                <p>Images Coming Soon!</p>
                <p>Please see the about page for more information.</p>
            </div> <!-- end #content -->
        </div> <!-- end #internal -->
        <?php include('includes/footer.php'); ?>
    </div> <!-- end #wrapper -->
</body>

CSS;

body {
background-color: #f1f1f1;
font-family: georgia,sans-serif;
color: #333;
margin: 0;
padding: 0;
}

#wrapper {
width: 960px;
background-color: #f1f1f1;
margin: 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}

#internal
{
width: 959px;
height: auto;
background-color: #f1f1f1;
margin: 0 auto;
border-right: 1px solid #ccc;
}

#content {
width: 675px;
height: auto;
float: left;
padding: 10px;
}

#sidebar {
width: 150px;
/* height: 410px; */
float: left;
background-color: #27408B;
color: white;
}

#sidebar a {
text-decoration: none;
color: white;
}

#sidebar li {
list-style: none;
}

As I said; noob. So I’m probably doing something dumb here…
I’ve tried jsfiddle, but even using the large amount of content in the about page, it renders it small, so it doesn’t affect the sidebar…
I’ve tested in Chrome and IE, both have the same issue.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This can be fixed pretty easily with your existing code. The basic method is outlined here: CSS Equal Height Columns.

    Basically, you fake it by adding your sidebar color to a wrapper div (in your case, you can use your existing #internal). Because this div actually CONTAINS the main content, it will expand as necessary. To make it look like it’s a sidebar, you then give the main content a background color that matches your body. The actual sidebar div has no background, it just holds the text. You might need to see this in action for it to really make sense, but here are the relevant bits of CSS:

    #internal {
    background-color: #27408B; /* the color you want for the sidebar */
}

#content {
    background-color: #f1f1f1; /* matches the body background */
}

    And then remove the background-color line from #sidebar. (I also had to add a float to #internal and change its width to auto to get things working.)

    Here it is in JSFiddle

    • 0