Navigationbar not Growing with Content

HTML & CSS
1

Hi,

When i have more content in ContentArea then navigationbar is not growing with content.

I tried some approaches to make the navigation bar grow dynamically with content. But, i am not able to make the additional Information part to be at the bottom with those approaches

So, please help me with this, so that i can meet both the requirements.
i.e, 1.Navigation bar dynamically growing with content and
2. Additional Information portion always at the bottom irrespective of content (without using min-height in px).

Also please note that i don’t want to specify height,min-height and width in pixel.
(In the below html, DataBlocks height is given in pixel just to show some space for content :))
PFB the sample html code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
html, body {
        height: 100%;
        }
#header{background-color:#CE8639;border:1px double black;}
#navigationbar{float:left; width:20%;background-color:#F7DFB5;border:1px double black;min-height:100%;}
#topbar{float:left;width:78%;padding-right:1%;background-color:#FFDBBD;border-bottom:1px solid silver;border:1px double black;min-height:4.5%}
#Info{background-color:#FFFBD6;float:right;width:78%;min-height:20%;margin-right:0.6%;border:1px solid red;}
#footer{border-bottom:1px double black;background-color:green;clear:both;text-align:center}
#contentarea{float:left;width:78%;margin-left:1%;min-height:75%}
.DataBlock{background-color:#FFFBD6    ;height:100px;border:1px solid red;}
</style>
</head>
<body>
<div id="header">
Header
</div>
<div id="navigationbar">
navigationbar
</div>

<div id="topbar">
            topbar
        </div>

    <div id="contentarea">

        <div class="DataBlock">
            DataBlock1
        </div>
        <div class="DataBlock">
            DataBlock2
        </div>



    </div>

    <div id="Info">
        Additional Information
    </div>

    <div id="footer">
        footer
    </div>
</body>
</html>
2

Faux columns can work for fluid designs - if your columns are set as a percentage of the available space (eg 25% | 75%) or if one is a set width (eg 200px | remainder), you just need to set the background position either in terms of % or px.

If you can give a link to the current setup online, we might be able to better explain how to go about it.

3

Do you mean that the navigation bar doesn’t stretch down the page? If so … you’re right, it doesn’t. There’s no way to force the height of one <div> to match the height of another. The way round it is to use Faux Columns, where you put a background image on the <body> or a parent <div>, which has different colour areas that sit behind the different <div>s, giving the illusion of those <div>s having a coloured background stretching down to match the height of the tallest.

4

Hi Stevie,

I am very sorry I cannot show u the original screen. But the sturcture and other things are similar to the code what i have mentioned in the previous post.

I tried with two color image with black line at 20% of total width(which i am using for border separating the navigation bar and main content) but when i changed the resolution(lower resolutions), the data in the main content is coming over the image which i used for navigation bar.

It would be of great help if you can show me the usage of faux columns in the above code which i posted.

Thanks in advance.

5

OK, here goes.

First of all, get rid of html, body {height:100&#37;;} - all that does is make the page too tall for the window so you get scrollbars.

Next, we need a new wrapper around the area that we’re interested in. Before the navigation bar, open <div id="main">, and close it after the additional information. That’s what we’re going to set the background image on.

Now, draw your background image. Make it really, really wide, but only needs to be 1px high, because we’ll repeat it. If you make it 1500px wide, that will account for most people, and it makes the sums easy. Your left-menu is 20% of the width, so the colour for that menu needs to cover the first 20% (ie 300px) of the image. The other 1200px is the background colour for the main content block. Save it as something imaginative like background.png.

Now the clever bit.

Add this to your CSS:

#main {
background: url(background.png) repeat-y 20% top;
overflow:hidden;
max-width:1500px;}

What that does is…
url(background.png) gives the file path for the image
repeat-y means it repeats vertically so that it stretches down the page
20% means that the image is horizontally aligned 20% of the way along. In practical terms, this means that the point 20% along the image will always be 20% of the way along the available space - in other words, your first 300px will cover the 20% needed for the menu (and a bit more off to the left that’s out of sight)
top isn’t strictly necessary, because it’s repeating vertically, but I’ve put it in to make sure the browsers play nicely
overflow:hidden is a fix needed to ‘enclose the floats’ - floated elements don’t contribute to the height of the parent element unless you use a method like this to enclose them
max-width means that if the window becomes wider than the background image, it just stops at 1500px and the content doesn’t get any wider.

See http://getdown.org.uk/sitepoint/fauxcolumns/columns.htm

6

Faux Columns doesnot work for different resolutions and different screen sizes as we are using single fixed image for the entire background.

Please suggest any other solution.

I tried the below solution for Equalising Column height in CSS and i am able to get the navigation bar dynamically growing with content but i am not able to make the additional Information part to come at the bottom when i have less content.

http://www.pmob.co.uk/pob/equal-columns.htm