CODEWITHSUNDEEP
cssdynamichtml
FizzBuzz
FizzBuzz

Reputation: 568

Dynamically Resize DIV's using CSS

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.

Upvotes: 0

Views: 6010

Answers (2)

driedoezoe
driedoezoe

Reputation: 185

What is it that you want to accomplish? The blue sidebar to have the same height as te text in de content area?
If so, the easiest way is to put a blue background image to the div that containce the sidebar and te content div.

To do that, you have to put < div style="clear:both">< /div> after your < div class="content">...< /div>
This way, your id internal div will grow with de height of de floating children elements.

<div class="sidebar">...< /div><br />
<div class="content">...< /div><br />
< div style="clear:both">...< /div><br />

After that you can add a repeating blue image:

#internal {
background: url(blue.png) top left repeat-y;
}


An alternative is to use jquery/css hacks, but I doubt it's worth the effort.

Upvotes: 0

ellawren
ellawren

Reputation: 947

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

Upvotes: 3

Related Questions