467,915 Members | 1,225 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,915 developers. It's quick & easy.

IE6 Layout drop problem

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
  • viewed: 2898
Share:
1 Reply
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.

Similar topics

24 posts views Thread by delerious | last post: by
4 posts views Thread by Kerry Sanders | last post: by
7 posts views Thread by David Veeneman | last post: by
14 posts views Thread by Anoop | last post: by
3 posts views Thread by Daniel | last post: by
2 posts views Thread by jaimebienlesfruits | last post: by
1 post views Thread by gatorade | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.