Anybody know if there is a way for this.
A 3 column layout used the display table equal height technique
#outer {display:table}
#inner {display:table-row}
#left, #middle, #right {display:table-cell}
and the logo with floated left is placed outside the above divs.
<img src="logo.gif" id="logo">
<div id="outer">
<div id="inner">
<div id="left"> content left </div>
<div id="middle"> content middle </div>
<div id="right"> content right </div>
</div>
</div>
For the print style sheet, client wanted to remove the left column,
but keep the middle and right column, so the print shows two columns.
If I have all ids (except the left column that is declared
display:none) floated left, the right column in Safari floated to the
left , placed above the middle column. Right column floated right
aslo get the same result in Safari
If only #middle and #right are floated and no special treatment for
#outer and #inner, then Safari, Firefox and Opera respect the columns
but in Firefox, the logo which is placed outside the #outer wrap,
stays in page 1, and the #middle and #right columns jump directly to
page 2, with a empty page 3. In IE (floated elements are used), the
right column is missing.
I am not going to worry the IE at this moment yet ( I understand I
can use Conditional comment for print style sheet too?!!!!), but want
to know if there is a way I can make the logo and the middle/right
columns stay in one page in Firefox. Obviously I can't declare
display:none for #outer and #inner.
Thanks!
tee
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
