CSS - dynamic height div

[google]

Hi all, have a small query about divs.

I'm building a site and the main layout consists of a banner at the top (containing logo), beneath that is a vertical navigation bar down the left side of the page, with the remaining space on the right taken up by the content box. Another thinner banner runs across the bottom of the site containing a copyright message and contact email etc.

My problem lies with the navigation bar. I have not specified a height attribute for the content box, so it grows dynamically with the contents (expected behaviour) and connects nicely to the bottom banner (expected behaviour).

However, the navigation bar does not grow, so I am left with a gap between the bottom of the nav bar and the bottom banner.

I have attempted setting the height attribute of the navigation bar so that it is always connected to the bottom banner, but when displaying the site in 4:3 AR (I use 16:10 widescreen AR), the bottom banner is pushed further down due to text wrapping in the content box, again leaving a gap between the navigation bar and the bottom banner. Here is a screenshot to show what I mean:

This is how it looks with no height specified, viewed in widescreen. Note: the white area is the content box, the two vertical lines on the left are the bottom of the navigation bar (the lines are left and right borders, I have omitted the bottom border since the top border on the bottom banner completes the box when they meet).



Here it is when viewed in non-widescreen with no height attribute specified (note the gap is bigger, since more text wrapping has occurred in the content box):



Now lets try setting a fixed height for the nav bar. In this case, 576px did the job perfectly. This is now how it looks in widescreen:



But oh no, since text is wrapped more in fullscreen, the content box pushes the bottom banner down more.



Actually come to think of it now, this is going to happen not only when viewing in different aspect ratios, but also in different resolutions.

So what I'm trying to find out is if there is a way to get the nav bar to vertically resize with the content box. I'm not sure how you would go about doing it, possibly with min-height?

Any help would be greatly appreciated.

[karinne]

Look into the Faux Columns method

[google]

I'm not sure how that will work with different aspect ratios though?

[Marc]

Do you mean how will it work with different Screen Resoloutions?

[google]

Yes, that too.

[MikeHopley]

Another option, which I prefer because it's more flexible (good for variable width columns), is to use the "display: table" family of display types to replicate the formatting of a table. This is my basic structure:

Code: Select all

<div id="table">
<div id="tableRow">
<div id="column1"></div>
<div id="column2"></div>
</div><!-- End div#tableRow -->
</div><!-- End div#table -->

I apply the CSS:

Code: Select all

div#table {
    display: inline-table;
    border-collapse: separate;
    table-layout: fixed;
}

div#tableRow {
    display: table-row;
}
div#column1, div#column2 {
display: table-cell;
}

Unfortunately IE doesn't support this, but it can be fixed with a hack.

I've chosen this exact structure simply because it seems to be rendered consistently between Opera, Firefox, and Safari. You might try slight variations, such as "table" not "inline-table", or leaving out the table row; but Opera in particular seems to require the "inline-table". Anyway, it works perfectly and it's valid.

Note that there's nothing wrong with the display format of tables. Indeed, this is exactly what designers are always trying to reproduce with CSS! The CSS "display: table" family of display types allows you all the advantages of tables, with none of their drawbacks.

[google]

Originally Posted by MikeHopley

Another option, which I prefer because it's more flexible (good for variable width columns), is to use the "display: table" family of display types to replicate the formatting of a table. This is my basic structure:

Code: Select all

<div id="table">
<div id="tableRow">
<div id="column1"></div>
<div id="column2"></div>
</div><!-- End div#tableRow -->
</div><!-- End div#table -->

I apply the CSS:

Code: Select all

div#table {
    display: inline-table;
    border-collapse: separate;
    table-layout: fixed;
}

div#tableRow {
    display: table-row;
}
div#column1, div#column2 {
display: table-cell;
}

Unfortunately IE doesn't support this, but it can be fixed with a hack.

I've chosen this exact structure simply because it seems to be rendered consistently between Opera, Firefox, and Safari. You might try slight variations, such as "table" not "inline-table", or leaving out the table row; but Opera in particular seems to require the "inline-table". Anyway, it works perfectly and it's valid.

Note that there's nothing wrong with the display format of tables. Indeed, this is exactly what designers are always trying to reproduce with CSS! The CSS "display: table" family of display types allows you all the advantages of tables, with none of their drawbacks.

Thanks but I didn't actually understand any of that, I'm relatively new to CSS. I tried that link you gave, and although I could copy and paste the source code of the test page and it worked, I couldn't seem to get it to work on my page.

[MikeHopley]

If you're new to CSS, then perhaps my method is too difficult (for now).

Note that I'm describing two different methods: one for good browsers, one for Internet Explorer.

The method for good browsers involves "display: table". For IE, you use a normal float layout and apply the javascript hack.

[google]

I'm currently using a normal float layout and it's proving extremely difficult for me to get this working

[MikeHopley]

Originally Posted by google

I'm currently using a normal float layout and it's proving extremely difficult for me to get this working

You might be better off with the "faux columns" method that Karinne posted. This is not as flexible, but in a fixed-width layout it does the job.

If you want to use my method, do it like this:

1. Get the "display: table" version working in Firefox.
2. Use conditional comments to add a stylesheet for IE.
3. In this IE-only stylesheet, reset the div#table and div#tableRow to "display: block".
4. In this IE-only stylesheet, apply float styles to "column1" and "column2".

[google]

Can you give me an example? This is my current css:

Code: Select all

#leftnav 
{
    margin: 0px;
    width: 175px;
    width: 175px;
    background-color: #EAE9E5;
    border: 1px solid #000;
    border-bottom: none;
    text-align: center;
    float: left;
    padding-bottom: 0px;
}

#content
{
    margin: 0px;
    padding-left: 5px;
    padding-right: 5px;
    background: #fff;
    border: 1px solid black;
    border-bottom: none;
    border-left: none;    
    voice-family: "\"}\"";
    voice-family: inherit;
    overflow: auto;
    text-align: center;
}

#bottombar
{
    margin: 0px;
    border: 1px solid black;
    background: url('../images/topbarbg.jpg');
    background-repeat: repeat-x;
    clear: both;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    height: 1em;
}

[karinne]

Originally Posted by google

I'm not sure how that will work with different aspect ratios though?

If you have a fixed width layout than the Faux Columns method is, by far, the easiest and simplest of all solutions.

If you have a liquid layout ... then follow MikeH instructions.

[google]

I think I will do that, but I need him to explain it in more layman's terms because I can't really understand it. The code he has pasted looks a lot more complex than any I have ever used before.

[karinne]

HAHA!!! I agree I have never used that method either .... then again ... I never create fluid layout

[MikeHopley]

Originally Posted by google

I think I will do that, but I need him to explain it in more layman's terms because I can't really understand it. The code he has pasted looks a lot more complex than any I have ever used before.

I might set up a code template for this. Perhaps this could be the basis for a newsletter tutorial.

Is there anything about the concepts that you want me to explain, or would you just like help setting it up?

[google]

Both please, as stated above I'm a complete noob to css

[MikeHopley]

Originally Posted by google

Both please, as stated above I'm a complete noob to css

All right. I won't have time to do this at once; you'll have to be patient.

Just a reminder: this is only useful if you have variable width columns. If you are setting your column widths in pixels (px), then my method is overkill.

[google]

My nav bar is fixed width, but my content box is fluid

[Marc]

Have you got a link?

You should, in theory, be able to make the nav bar the same width as your content.

[google]

Right, I've managed to get that javascript method working. However my problem now is that Firefox seems to vertically align all of the navigation bar images at the bottom of the div, whereas IE shows them at the top where they should be.