Working with min-height

rsearing · #1 (**permalink**) June 9th, 2007, 12:58 PM

I am trying to get min-height to work for IE6, so I simply changed the height to be that of the min-height in a commented section (see below). The problem is, then, that that column doesn't stretch with the right. Thoughts?

My html page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <link rel='stylesheet' type='text/css' href='two-column.css' />
    

    </head>
    <body>
        <div id='main'>
            <div id='header' >
                <img src="images/sunslogo.jpg" />

             </div>
            <div id='container'>
                <div id='first-column'>
                    <span id='menu1'>Text in the first column. </span>
                    <span id='menu2'>Text in the first column. </span>
                    <span id='menu3'>Text in the first column. </span> </div>
                <div id='content'>
                    Text in the content column. <br />
            Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />
Text in the content column. <br />

                </div>
            </div>
            <div id='footer'>
                <h6>Footer</h6>
            </div>
        </div>
    </body>
</html>

two-column.css

body {
    background-image:url(images/EveningShadows.jpg);
    background-repeat:no-repeat;
    background-position:center;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}
h1, h6 {
    margin: 0;
    font-weight: normal;
}

div#main {
    width:700px;
    margin:auto;
}

div#container {
    position: relative;
    min-height: 400px;
    border: 1px solid gray;
       background:white;
    margin: auto;
}
div#first-column {
    position: absolute;
    top: 0;
    bottom: 0;
    min-height:820px;
    border: 1px solid gray;
    background: rgb(240, 240, 240);
    width: 200px;
    margin: 3px;
    background-image:url(images/paletteleft.jpg);
}
div#first-column {
    left: 0;
}
div#content {
    position:relative;
    top:3px;
    margin: 3px 3px 6px 208px;
    border: 1px solid gray;
    min-height: 820px;
    background-image:url(images/paletteright.jpg);
    background-repeat:no-repeat;

}
div#header,
div#footer {
    background:white;
    padding: 3px;
    border: 1px solid gray;
    width:694;
    margin: auto;
}
div#header {
    border-bottom: none;
    padding-left:70px;
}
div#footer {
    border-top: none;
}
#menu1 {
    position:absolute;
    top:190px;
    left:130px;
    padding-right:10px;

}

two-column-ie.css

#container {
    height:400px;
}

#first-column {
    height:820px;

}

#content {
    height:820px;
}

Thanks,
Rob

Need to download code?

Navigation