CSS Layout help needed

I have a layout, which is from Dynamic Drive, and has worked well for me in nearly all aspects except the following. When a large (wide) image is placed in the content area (main column, white BG, left), the border in this content area behaves differently in relation to the overflow, depending on whether you're using IE or FF.

IE displays the way I want. However In FF, the right hand border remains in position, and the wide image (and wide text, placed there as an example) 'overlap' this border before overflowing off the page (well, overflowing behind the right column).

HTML & CSS both validate successfully.

So, I have the following DOCTYPE and quirks mode setting at the top of page:


<!--Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Then the following styles:


<style type="text/css">
body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}
#framecontent {
position: absolute;
top: 0;
bottom: 0; 
right: 0;
width: 200px; 
height: 100%;
overflow: hidden; 
background: #5d7e91;
color: white;
}
#maincontent {
position: fixed;
top: 0;
left: 0;
right: 200px; 
bottom: 0;
overflow: auto; 
background: #fff;
}
#mainContentInner {
padding:10px;
}
.innertube {
margin: 15px;
}
.innertubeWithBorder {
margin: 15px;
border: solid 1px #666666;
}
* html body {
padding: 0 200px 0 0; 
}
* html #maincontent {
height: 100%; 
width: 100%; 
}
</style>

Then here is what's in the <body>:


<div id="framecontent">
 <div class="innertube">
 <h1>Display Controls</h1>
 <h3>Sample text here</h3>
 </div>
</div>
<div id="maincontent">
 <div class="innertubeWithBorder">
 <div id="mainContentInner">
 <h2>Test Content</h2>
 <img alt="wideTestImage" src="wideimg.gif" width="1300" height="50"/><br/>
<p>AReallyLongWordWhichIsSimilarToHavingAnImageWithWidthGreaterThanTheWidth\
OfThisDivToShowOverFlowProblemWithBorderSoIfYouResizeThisWindowNarrowerYouW\
illSeeWhatIMeanWorksFineInIEButNotFirefox</p>
 <p>So I want that border over there ------> to dissappear behind the right hand column like it does in IE, and be visible once you use the scrollbar below and scroll to the right</p>
 </div>
 </div>
</div>

So, like I said, in IE it displays exactly how I want. Any idea how I can replicate that in FF?

Thanks,

bj.

[edited by: swa66 at 8:42 am (utc) on Oct. 1, 2009]
[edit reason] No URLS, please see ToS and Forum charter, Fix sideways scroll [/edit]

CSS Layout help needed

CSS Layout issue

bj_one

bj_one

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week