Positioning problem - help please

A few people using IE have reported that some of the pages of my site http://sourgumdrop.org.uk (including index.html) are not displayed correctly. The main text should appear to the right of the menu (not below as it does for them). Naturally it works on my system so I cannot experiment.
How can I cure this for all browsers? Thanks in advance.

The problem relates to the way the sums work out. On your two main panels, you have a combination of percentage width plus fixed size border, margin and padding.

With the viewing window of the browser at certain widths, adding up the various elements gives you a total width greater than the viewing window and therefore the main panel cannot float up into position.

The problem is also compounded by the box model problem in IE.

If you experiment, I think you will find the layout will break in IE, FF and Opera once the viewing window gets below a certain point.

ukgeoff has identified the cause of my problem and I think we've partially solved it, BUT I am still unsure!
I give this lengthy description in the hope that it may help others who are struggling like me, and because I still do not understand the behavior of IE. Please read on.
I have two panels:
The display went wrong for some users when I had:
div.options {
float: left;
width: 20%;
border: 1px solid #000;
margin-left: 2px;
...
}
div.main_info {
float: right;
width: 78%;
border: 1px solid #000;
margin-left: 2px;
padding-left: 5px;
padding-right: 5px;
...
}
My original reasoning was as follows:
I knew it was not a good idea to mix absolute and relative sizes but wrongly assumed that these few fixed pixels would not be a problem. I thought that 4 * border + margin-left + margin-left + padding-left + padding-right =
4 + 2 + 2 + 5 + 5 = 18px would always be < 100% - (78% + 20%)
i.e. 18px < 2%
This means that 9px < 1% and hence 900px < 100% and so if the browser was set >900px the pages should display as I wanted. This logic fitted with FF and Konqueror experiments where I varied the px sizes of the borders, margins, padding and the panel percentages. And on my machines the pages displayed correctly on IE, but others reported problems. I do not know their screen widths.
UKGEOFF pointed out these few pixels combined with percentages did matter so I switched to percentages as far as possible.
I could not specify border as a % so left it at 1px and now I have:
div.options {
float: left;
width: 20%;
border-right: 1px solid #000;
margin-left: 1%;
...
}
div.main_info {
float: right;
width: 74%;
margin-left: 1%;
padding-left: 1%;
padding-right: 1%;
...
}
1 * border + margin-left + margin-left + padding-left + padding-right =
1px + 1% + 1% + 1% + 1% + 20% + 74% = 1px + 98%
so 1px must be < 2% and hence 50px < 100%
This logic works fine for FF and Konqueror: neither of which will let me shrink the browser width to 50px but they go on displaying the pages "correctly" right down to their minimum. Of course IE is different: it flips the righthand panel below the left panel at about 720px. WHY?
Is my logic wrong, or my basic understanding of css wrong, or both?
Can anybody explain or point me at a suitable reference on the web, please?
Thanks in advance.

Change the code blocks shown below - EXACTLY.

Code: Select all

div.options {
   background: #ffffff;
   color: #000;
   float: left;
   width: 200px;
   border-right: 1px solid #000;
   /*margin-bottom: 0%;
   margin-left: 1%;
   margin-top: 1%;*/
   line-height: 1.5em;
   font-size: 12px;
}

div.main_info {
   background: #fff;
   color: #000;
   /*float: right;
   width: 74%;
   margin-top: 1%;*/
   margin-left: 220px;
   /*margin-bottom: 1%;
   border: 1px solid #000;*/
   font-size: 13px;
   padding-right: 10px;
}

ul.l1
{
   list-style-image: none;
   list-style-type: square;
   list-style-position: inside;
   margin: 0;
   padding: 0 0 0 5px;
   line-height: 2.0em;
   text-indent: 0pt;
}

ul.l2
{
   list-style-image: none;
   list-style-type: circle;
   list-style-position: inside;
   margin: 0;
   padding: 0 0 0 5px;
   line-height: 2.0em;
   text-indent: 5pt;
}

Also get rid of this from the main body:

Code: Select all

<br class="clearboth"></br>

as it's stopping the stuff that starts

Code: Select all

<h2>Downloads</h2>

from moving up into position.

See how you go with that.

BTW: If you reduce the window size, you will see that there is a problem with the header banner but I'll let you have a go at that yourself.

IE is no hero to me (I use FF for daily browsing) but IMO their box model is the closest to w3c-compliant of any of the browsers. Or certainly, no farther off than anyone else. Mozilla particularly needs to get their act together on this. This is especially irritating, considering that MS is the only company in a position to force developers to use its specs rather than w3c's, and it would actually have something to gain by doing so.

I can live without max-width if I can make things fit the first time through. But I'm not going to spend hours creating hacks if minor players like Netscape can't bother to comply.

You must be the only person I have come across who reads it that way. Firefox, Opera, et al interprit the box model the way W3C intended, ie.,

width + padding + border + margin

IE's version is width(includes any padding) + border + margin

hence the problem.

Well I applied ukgeoff's suggestions exactly and I am grateful for his help, but there were side effects I did not like so I have abandoned my original plan of using percentages and switched to fixed px values for all panels, borders, margins and padding.
Although, as my experiments confirm FF and IE do their sums differently (see discussion between ukgeoff and masonbarge), with some fiddling around I've found a combination of sizes that appear to satisfy all the browsers I have access to. Do they work on yours???
As ever, I'd be grateful for any comments on the current attempt.

I would appreciate knowing what these side effects were.

Might be something I could make some helpful comment on.

The biggest help from IE is that it sets box width in accordance with w3c: total size of a box = width + margins/borders/padding. Firefox includes these in the width size, which actually may make more sense, but it's counter-standard. IE is better at rendering accurate font sizes, too, but not as good at rendering colors accurately.

From W3c Rule 4I've been wrong before and they aren't crystal clear, but I can't read this any way except that IE does it right. width; 5; height; 5; border: 2; padding: 2; margin: 2: means you take up a total of 11 wide and 11 high. Actually this is helpful IMO in fitting together a pixel-perfect layout although it is more work if you do a mathmatical preplan.
They both have PLENTY of nonsense built in. I use FF for browsing because I like the way it works on the user end, although Opera has a couple of interesting innovations.

Anyway, on the develepor side, you have to blame Mozilla for those horrible 3px differences in IE and FF.