In designing a
CSS layout with a left box, you are faced with a dilemna with wide lines (either code fragments
in <pre>, large images):
[1] If you put them in some
HTML element (table, div), not directly in body, the
right margin calculation work differently: in body if you have a line 2000
pixels wide, it does not "stretch" the right margin, so the next paragraph is
still right-margin-wrapped ate the right border of the browser window.
See:
http://wikix.ilog.fr/wiki/bin/view/Batik/TestLongLines
However, if you still want to put someting in the left margin, the only solution
to do this with the text still in the <body> is to use a float, and IE has a bug
in floats where the contents is pushed downwards after the float instead of
extending the non-fitting contents to the right past the broweser edge
See:
http://www.positioniseverything.net/articles/float-bugs-1.html
[2] If you do a layout with columns via tables, long lines will force formatting
with huge margins. We had users struggle for days on big pages (with code
sniplets) trying to understand where their text went (it was past the right
margin). See the same contents as above, but with a table layout:
See:
http://wikix.ilog.fr/wiki/bin/view/Test/TestLongLines
However, the table layout work around bugs in IE.
Our position for the ILOG intranet: since [1] resulted in obvious bugs (contents
"dropping" to bottom), it was ugly but fixable, whereas [2] bugs were seemingly
much harder for user to know what was happening, we decided to go with [1],
teaching users (or correcting their pages) to not have too wide content at the
top to avoid IE mess (basically removing the width='100%' on user tables), and
providing an alternate skin with table layout for special cases
(highly-formatted home pages mainly). we installed the patch to read
prefereneces from the topic to be able to set the skin for each topic.
So basically, all pages uses a float layout, and pages holding big tables use a
table layout, or have some description text before the big table, see:
http://wikix.ilog.fr/wiki/bin/view/Koalaskin_tasklist/WebHome
--
ColasNahaboo - 16 Apr 2004
About the content "dropping to the bottom" of the left floating block (left nav for instance) - this is a Win IE only problem by the way - I found that IE renders correcly if the floating block is replaced by a absolutely positioned block.
One small change makes a world of difference. No more separated templates needed, no more special user instruction or removing 100% on tables.
It took me a long time to find this solution, as it may be public knowledge but is not written about specifically.
--
ArthurClemens - 16 Apr 2004
You have the same dilemma when using an
HTML table to show a sidebar. Collaboration works best if "gotchas" like this are avoided. At work we created a skin where you can turn on/off a sidebar conditionally (using a per page
Set setting and
SpreadSheetPlugin calcs in the skin). The official team pages have a sidebar, the majority of other pages don't. That is, for ease of collaboration, pages that change often and new pages do not have a sidebar by default.
--
PeterThoeny - 16 Apr