I have 2 different boxes on my site, one next to the other. The one on the left changes height according to each page and the box on the right has a fixed height of 740 px.
Please take a look at my site here to understand what I am saying:

Is there a way to make the height of the box on the left at least 740px so that there is not an empty space (black) below it?

Thanks in advance.

You can use

min-height: 740px

which will do exactly what it sounds like. However it doesn't work in IE. But there are ways to do the same in IE.

IE actually treats height as a min-height so in IE height: 740px would work. Of course that wouldn't allow your column to expand beyond 740px in other browsers.

The way to make all browsers happy is to use min-height: 740px in your main style sheet and then set up a conditional comment for IE

<!--[if IE]>
<link rel="stylesheet" href="ie-style.css" type="text/css" />
<![endif]-->

and place height: 740px in ie-style.css. You want to make sure the conditional comment comes after the link to your main stylesheet. In this case it won't matter, but sometimes you might do something like set a margin of 20px in your main stylesheet and 10px for IE. IE will use whichever comes last so it's good practice to have the conditional comment come later in the code.

Also you could have placed the css directly in the conditional comments, with the <style type="text/css"></style>, but I prefer to set up a separate stylesheet for IE since you often use it for a few things and having the separate stylesheet makes it easier to maintain later.

You can also be more specific with the conditional comments:

<!--[if IE 7]>
<!--[if lte IE6]> // lte = less than or equal

Thank you for the reply vangogh!

The style for this div is actually in line, not on a separate .css file.
Therefore, in this case, I would like to add the if comment on the same file. Is this how I would write the code?

<div style="background-color:#333;float:left;width:813px;clear:both; margin-right:5px; margin-left:0px; margin-bottom:5px;min-height:756px;">
<!--[if IE]><style type="text/css">height:756px;</style><![endif]-->
</div>

--------------------------------------------------------------------------------------

Another question:
Suppose I had a separate file called style.css and there I have:
#box1 {height:756px;}

When I make my other file called ie-style.css, do I write the code in this file like this:
#box1 {height:756px;}
<!--[if IE]>
height:756px
<![endif]-->

Thanks again!

When I make my other file called ie-style.css, do I write the code in this file like this:
#box1 {height:756px;}
<!--[if IE]>
height:756px
<![endif]-->

No, the conditional comment MUST be in the HTML. You would need a SEPARATE css file to hold all the 'fixes' needed for IE only, and the 'fixes' are the ONLY rules that need to be in that separate file.

Putting styling in-line is bad enough, but also sticking the CC's inline is a mess.

I agree with LNR. Using external stylesheets is going to be much more manageable. With the styles inline it can be a nightmare having to go back and make a change.

For your first question try something like

<div id="left-column">

and then have the css be:

div#left-column {background-color:#333;float:left;width:813px;clear:both; margin-right:5px; margin-left:0px; margin-bottom:5px;min-height:756px;}

Ideally the css would be in an external file sheet, but if you want to have it in the html file you could add the styles to the head section of the document. An external file is better and will be much easier to manage.

Then you can change things for IE specific browsers with the conditional comments, by either linking to the external ie-style.css or placing the style block in the head of your document.

<!--[If IE]>
<style type="text/css">
div#left-column {height:756px;}
</style>
<![endif]-->

For your second question if you have your styles in style.css your html would link to it like:

<link rel="stylesheet" type="text/css" href="style.css" />

then with the conditional comments you might have:

<!--[If IE]>
<link rel="stylesheet" type="text/css" href="IE-style.css" />
<![endif]-->

Hope that helps.