Forum Moderators: not2easy
<html>
<head><title>Work!</title></head>
<body>
<div style="width: 200px; float: right; clear: right;">
This fella sits in the top right. Works good.
</div>
<div style="width: 100%; height: 100%; overflow: scroll;">
<table border=0 cellpadding=0 cellspacing=0 width="2048" height="2048">
<tr><td>This table is this big for a reason. Doi. But this div should extend out to the smaller div, and the overflow is scrolled.</td></tr>
</table>
</div>
</body>
</html>
What's meant to happen (what I'm trying to achieve) is a large div which takes up about the screen width minus 200px of the right side of the screen, and then a thinner div on the right edge that stays where it is while the overflow in the main div is scrolled. If you paste the example html into a file and load it in IE6 you will see the desired effect. Now in Mozilla FireBird, the div does some strange stuff. If I delete the width: 100%; on the main div it works perfect. Some of the other things I have tried are setting the margin-right on the large div to 200px, and tried display: inline;, and some combinations of that, but to no avail. It's really come down to this width: 100%; What to do? I'm not about to start filtering for browsers but I am very keen on this effect.
while this is not a full answer, It's also not another cross-browser discrepancy..
It's one of THE biggest ones as far as CSS-P (float model) is concerned and unfortunately it is IE that is at fault
I'm not about to start filtering for browsers but I am very keen on this effect.
The good news it that filtering as such is not required you just need to write IE conditional CSS.. which as I see it is the way things are gonna have to be for a very long time. IE obeys its own rules other browsers are bending over backwards to follow the W3C standard recommendations. I wouldn't like to predict who will "win" but I know it will affect web design for the forseeable future!
IE (possibly as a way out) provide us with "Conditional Comments" or we can use hacks (there's a nice simple one on the go just now). So it's a case of one rule for them and another for the rest.. not filtering as such more like B\W discrepancies which quite easy to deal with!
Now your problem is initially being caused by the float model and this thread [webmasterworld.com] may help get you started on what's wrong.
however that is just the beginning I think there may be further issues because of the widths too. IE 6 in strict mode has even more problems than its quirky version! Are you choosy as to which doctype you use, do you like to be "strict"?
I think the easier way to achieve this effect may be to use a right margin on the large div and then absolutely position the right div into the space that leaves.. would that be an option? or is there a footer involved here?
I'll play around and see what happens, does anyone else have other ideas...
Suzy
<added>PIE Article explaining IE's buggy Float Model in detail [positioniseverything.net]</added>
[edit]
Actually I think my issue is with non-fluid content and scrolling divs more than anything.
you're quite right the issue is scrolling divs but also the right floated div does cause different cross browser issues too in fact I got three different results in Opera, Moz and IE (windows) trying to work with the float.
I came across so many cross browser issues that I will just post this and let you see if it works for you.
you should note that it involves absolutely positioning that right div. I don't know if that's a issue with your layout would it be liable to overflow any footers?
and also only works in IE quirks mode
anyhow here it is.. I'm not sure how it holds up in Macs as I ran out of trial time ;) so I don't know if the "hacked" width would need to be hidden from Mac or not..
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0; height: 100%;}#right {
width: 200px;
position: absolute;
top: 0;
right: 0;
background: #eee;
}#left {
margin-right: 205px;
background: #fee;
overflow: scroll;
height: 100%;
}/* hide from mac \*/
* html #left {width: 100%;}
/* end hide */table {
width: 2048px;
height: 2048px;
border: 0;
}</style>
</head>
<body>
<div id="right">
This fella sits in the top right. Works good.
</div><div id="left">
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top">This table is this big for a reason. Doi. But this div should extend out to the smaller div, and the overflow is scrolled.<br>This table is this big for a reason. Doi. But this div should extend out to the smaller div, and the overflow is scrolled.</td>
</tr>
</table>
</div>
Suzy
