By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,447 Members | 1,172 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,447 IT Pros & Developers. It's quick & easy.

IE6 Layout drop problem

P: n/a
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>
++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++

May 3 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
jo****@gmail.com wrote:
Hi,

I have an intranet page which will be used by IE users only, primarily
IE6 users.

The problem is
You just told us the problem. Heh. Just kidding.
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?
If you will permit a somewhat exaggerated analogy, this is like saying,
"When I breathe, oxygen comes into my lungs and carbon dioxide goes out.
How can I overcome this?"

The answer to both is that it's supposed to work that way, so there's
nothing to overcome. Floated elements are supposed to, well, float.

From http://www.w3.org/TR/CSS21/visuren.html#floats:
<q>If there isn't enough horizontal room for the float, it is shifted
downward until either it fits or there are no more floats present.</q>

The wide content is your content, and you've made it wide. What do you
want the browser to do with your content? You say <table width=900and
the browser believes you. Make it 60% or 40em and see if you like the
difference.

What's so bad about the browser doing the dropping anyway? Does the
content lose meaning? If not, then consider letting nature take its
course. Relax. Go with the flow. Mellow out. Peace, man.

--
John
May 3 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.