Working with min-height
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' />
<!--[if lt IE 7]>
<link rel='stylesheet' type='text/css' href='two-column-ie.css' />
<![endif]-->
</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
|