CODEWITHSUNDEEP
htmlcss
Thomas John
Thomas John

Reputation: 1899

HTML layout issue in IE6, please help

Hello I have an HTML document as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style/styles.css" type="text/css" />
<title>::Model::</title>
</head>
<body>
<div id="wrapper">

<div id="header">
header
</div>

<div id="main">


<div id="left">


text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>

</div>
<div id="right">

text<br>
text<br>

</div>

</div>

<div id="footer">
footer
</div>

</div>
</body>
</html>

My CSS file is 

#wrapper{
    margin:0px auto;
    width:1000px;
}

#header{
height:50px;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}

#main{
border:#990000 solid 1px;
margin:2px;
padding:5px;
overflow:auto;
}

#footer{
height:100px;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}

#left{
border:#CCCCCC solid 1px;
width:640px;
padding:4px;
float:left;

margin-right:2px;

}
#right{
float:right;
padding:4px;

border:#CCCCCC solid 1px;
width:320px;


}

This is working good in all browses except IE6, The main area should extend with dynamic contents.

Thanks for the help

Upvotes: 0

Views: 105

Answers (4)

Daniel Szabo
Daniel Szabo

Reputation: 7281

Here's a hack I use. Remember, this is a total hack and shouldn't be substituted for sound css. Paste this into the bottom of your page.

<script type="text/javascript" language="javascript">

function setMainHeight(){
    var main = document.getElementById("main");
    var left = document.getElementById("left");
    var right = document.getElementById("right");

    main.style.height = (left.offsetHeight >= right.offsetHeight) ? left.offsetHeight + 'px' : right.offsetHeight + 'px';

}
setMainHeight();

</script>

Upvotes: 0

casablanca
casablanca

Reputation: 70701

Try adding a height: 100% to #main - it's a known hack to make IE render overflow: auto properly.

Upvotes: 1

prodigitalson
prodigitalson

Reputation: 60413

If i recall correctly IE needs to have a width on the div#main if you want to clear it using the overflow method.

Upvotes: 0

Brad Mace
Brad Mace

Reputation: 27886

You should try validating your web page. You've given it an xhtml doctype but you're definitely not writing valid xhtml. Invalid code like that can frequently cause glitches in different browsers, though in the case of IE6 it may not work right anyway.

Upvotes: 2

Related Questions