Tags:
create new tag
, view all tags
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

Edit | Attach | Watch | Print version | History: r5 < r4 < r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r5 - 2004-07-22 - PeterThoeny
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.