With Internet Explorer, the column layout breaks when the main-content area has overflow. I am using a subtheme derived from WebX and with slightly modfied column values:

.width{width:98%;min-width:840px;}
#genesis_1 .two-sidebars  #content-inner{margin:0 180px 0 18em;}
#genesis_1 .sidebar-left  #content-inner{margin-left:18em;}
#genesis_1 .sidebar-right #content-inner{margin-right:180px;}
#genesis_1 #sidebar-left{float:left;width:18em;margin-left:-100%;}
#genesis_1 #sidebar-right{float:left;width:180px;margin-left:-180px;}

The problem arises for example with a table in the main content area that does not fit (see http://www.denkmalwacht-bb.de/termine when the browser window is less than ~1100px wide). With Firefox, the overflow simply overlays the right sidebar (which is the wanted behaviour). IE moves the right sidebar to the right, and the left sidebar appears equally shifted - obviously a result of the margin-left:-100% directive.

Hiding the right sidebar does not help. As soon as the table overflows the browser windows width, the left side bar again gets displaced.

Is there a possible workaround for IE?

CommentFileSizeAuthor
Firefox 3.5 snapshot with desired behaviour212.82 KBccprog
Internet Explorer 6 snapshot with displaced left sidebar79.91 KBccprog

Comments

Jeff Burnz’s picture

Jeff Burnz commented

Theres a couple of ways of dealing with this overflowing content.

First way, which is reasonable elegant is to use overflow and scroll the content:

#content {
  overflow-x: scroll;
}

Another way is to use z-indexing, which will give you the desired result you asked for (emulate Firefox):

#content {
  position: relative;
  z-index: 999; <- set this number as high as it needs to go...
}
ccprog’s picture

ccprog commented

I was now able to confirm that this is a IE 6 only issue. Unfortunately that means z-order will not work: content is moved to the top, but the sidebar remains displaced.

Well, as you said, scrolling the overflow is reasonable, so I'll use this.