CSS layout problem with small screen size

[bitdaf]

I have a problem with my css layout. I'm very new to using css instead of
relying entirely on tables so I would really appreciate your help.

www.bitsypix.com/sigs.html
www.bitsypix.com/fractals.html


When the screen goes below 800 x 640, or around there somewhere, the middle
content (#content - style sheet here: www.bitsypix.com/bitsypix.css ) drops
way out of site, apparently below the #nav element.
THis seems to only be happening in IE 5 and 6.
NN6.2, NN4x, Opera 6 and Mozilla 1.0 create a scroll bar instead of dropping the content.

What should I do about that? I'd rather have it cause a scroll bar if
anything.
Thanks for your help!
Daf

[webmarkart]

have you tried using percentages rather than set widths. For example instead of:

<tr>
<td width="165"><a href="sigs.html" onmouseover="changeImages('image2', 'image2on')"
onmouseout="changeImages('image2', 'image2off')"><img name="image2" src="images/fractalsigs.gif"
alt="My Sigs" width="165" height="46" border="0"></a></td>
</tr>


try:

<tr>
<td width="30%"><a href="sigs.html" onmouseover="changeImages('image2', 'image2on')"
onmouseout="changeImages('image2', 'image2off')"><img name="image2" src="images/fractalsigs.gif"
alt="My Sigs" width="165" height="46" border="0"></a></td>
</tr>

[bitdaf]

Yes- I tried that - no joy.
Thanks
anyway tho.
Daf

[MCookie]

Not sure, but try taking out the margin-left from the content div. When you're floating divs (#nav), better not use margins.

#content {
border-left: 1px solid #bc8dd1;
margin-left: 200px;
padding: 10px;
}

[bitdaf]

Thanks for the response.
I tried your suggestion and still no joy. Content still drops. But thanks!
Daf

[Alekz]

Hi,
Look at this -> http://www.hftonline.com/forum/showthread.php?s=&threadid=5488
It seems Mike have solved Your problem...

Alex

[brothercake]

As mentioned in the above link, that method does not work in Netscape 4; it's also problematic in IE6 - creates horizontal scrollbars. I would advise trimming down the width proprtions so that the total width = 97%, to avoid this issue.