Hi,
I have an intranet page which will be used by IE users only, primarily
IE6 users.
The problem is with the two column layout I have is that if there's a
wide element in the main content of the page which is wider than the
size of the window, the wide content drops to the bottom of the page.
Can anyone assist with a simple way to overcome this? Thanks in
advance.
HTML posted below:
+++++++++++++++++++++++++++++++++++++++++++++
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<title>My IE layout drop problem</title>
<style type="text/css">
#Main
{
width:100%;
height:auto;
}
#Header
{
height: 33px;
line-height: 11px;
background-color:cyan;
height: 12px;
}
#LargeHeader
{
padding: 17px 0px 0px 2px;
height: 55px;
border-style: none;
border-width: 0px 0px;
background-color:blue;
}
#Menu
{
float:left;
top:130px;
left:0px;
width:140px;
height:440px;
padding:5px;
padding-bottom: 32767px;
margin-bottom: -32767px;
background-color: pink;
}
#Content
{
width:auto;
margin: 0 0 0 155px;
padding:5px;
background-color:yellow;
}
#footer {
background-color: aqua;
clear: both;
border: 1px solid #aaaaaa;
padding: 0.5em 0.5em 0.5em 0.5em;
text-align:center;
font-size:smaller;
}
</style>
</head>
<body leftmargin="0" topmargin="0">
<div id="Header">
Small Header
</div>
<div id="LargeHeader">
<h1>Large header</h1>
</div>
<div id="Main">
<div id="Menu">
Menu goes down here.
</div>
<div id="Content">
This is some content ...
<table width=900><tr>
<td>CellInAWideTableCellInAWideTable CellInAWideTable
CellInAWideTable</td>
<td>CellInAWideTableCellInAWideTable CellInAWideTable
CellInAWideTable CellInAWideTableCellInAWideTable</td>
</tr></table>
</div>
</div>
<div id="footer">
Footer Text
</div>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++
