beginning of a 3 col. layout

mail.css

/***** crystalmail|Mail mail task styles *****/


#messagetoolbar
{
 position: absolute;
    background: url('images/header.png') repeat-x;
  top: 26px;
  left: 0px;
  right: 0px;
  height: 46px;
  min-width: 350px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 205px;
  overflow: hidden;
  white-space: nowrap;
/*  border: 1px solid #cccccc; */
}

#messagetoolbar > a
{
  display: block;
  float: left;
  padding-right: 10px;
}

#messagetoolbar > a
{
  display: block;
  float: left;
  padding-right: 10px;
}

#messagetoolbar a.button,
#messagetoolbar a.buttonPas {
  display: block;
  float: left;
  width: 32px;
  height: 32px;
  padding: 0;
  margin-right: 10px;
  overflow: hidden;
  background: url(images/mail_toolbar.png) 0 0 no-repeat transparent;
  opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
}
#messagelistcontainer {

}

#messagetoolbar a.buttonPas {
  opacity: 0.35;
}

#messagetoolbar a.checkmailSel {
  background-position: 0 -32px;
}

#messagetoolbar a.back {
  background-position: -32px 0;
}

#messagetoolbar a.backSel {
  background-position: -32px -32px;
}

#messagetoolbar a.compose {
  background-position: -64px 0;
}

#messagetoolbar a.composeSel {
  background-position: -64px -32px;
}

#messagetoolbar a.reply {
  background-position: -96px 0;
}

#messagetoolbar a.replySel {
  background-position: -96px -32px;
}

#messagetoolbar a.replyAll {
  background-position: -128px 0;
}

#messagetoolbar a.replyAllSel {
  background-position: -128px -32px;
}

#messagetoolbar a.forward {
  background-position: -160px 0;
}

#messagetoolbar a.forwardSel {
  background-position: -160px -32px;
}

#messagetoolbar a.delete {
  background-position: -192px 0;
}

#messagetoolbar a.deleteSel {
  background-position: -192px -32px;
}

#messagetoolbar a.markmessage {
  background-position: -256px 0;
}

#messagetoolbar a.messagemenu {
  background-position: -288px 0;
}

#messagetoolbar a.spellcheck {
  background-position: -384px 0;
}

#messagetoolbar a.spellcheckSel {
  background-position: -384px -32px;
}

#messagetoolbar a.attach {
  background-position: -352px 0;
}

#messagetoolbar a.attachSel {
  background-position: -352px -32px;
}

#messagetoolbar a.insertsig {
  background-position: -448px 0;
}

#messagetoolbar a.insertsigSel {
  background-position: -448px -32px;
}

#messagetoolbar a.savedraft {
  background-position: -322px 0;
}

#messagetoolbar a.savedraftSel {
  background-position: -322px -32px;
}

#messagetoolbar a.send {
  background-position: -416px 0;
}

#messagetoolbar a.sendSel {
  background-position: -416px -32px;
}

#messagetoolbar select
{
  font-size: 11px;
}

#messagetoolbar select.mboxlist
{
  position: relative;
  margin: 0 8px;
  top: 6px;
}

#messagetoolbar select.mboxlist option
{
  padding-left: 15px;
}

#messagetoolbar select.mboxlist option[value="0"]
{
  padding-left: 2px;
}

#searchmenu
{
  width: 160px;
}

#searchmenu ul.toolbarmenu
{
  margin: 0;
}

#searchmenu ul.toolbarmenu li
{
  margin: 1px 4px 1px;
}

#messagemenu li a.active:hover,
#markmessagemenu li a.active:hover
{
  color: #fff;
  background-color: #c00;
}

#messagemenu li a
{
  background: url(images/messageactions.png) no-repeat 7px 0;
  background-position: 7px 20px;
}

#messagemenu li a.printlink
{
  background-position: 7px 1px;
}

#messagemenu li a.downloadlink
{
  background-position: 7px -17px;
}

#messagemenu li a.sourcelink
{
  background-position: 7px -35px;
}

#messagemenu li a.openlink
{
  background-position: 7px -53px;
}

#messagemenu li a.editlink
{
  background-position: 7px -71px;
}

#markmessagemenu a.readlink
{
  background: url(images/icons/dot.png) no-repeat 7px 2px;
}

#markmessagemenu a.unreadlink
{
  background: url(images/icons/unread.png) no-repeat 7px 2px;
}

#markmessagemenu a.flaggedlink
{
  background: url(images/icons/flagged.png) no-repeat 7px 2px;
}

#markmessagemenu a.unflaggedlink
{
  background: url(images/icons/unflagged.png) no-repeat 7px 2px;
}

#searchfilter
{
  white-space: nowrap;
  position: absolute;
  right: 190px;
  vertical-align: middle;
}

#searchfilter label
{
  font-size: 11px;
}

#mailleftcontainer
{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 195px;
}

#mailrightcontainer
{
  position: absolute;
  top: 0;
  left: 170px;
  bottom: 0;
  right: 0;
  min-width: 300px;
  display:inline
}

#mailrightcontent
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#messagepartcontainer
{
  position: absolute;
  top: 80px;
  left: 20px;
  right: 20px;
  bottom: 20px;
}

#mailcontframe
{
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  border: 1px solid #999999;
  background-color: #FFFFFF;
  overflow: hidden;
}

#mailpreviewframe
{
  position: absolute;
  top: 0px;
  right:0px;
  bottom: 0px;
  border: 1px solid #999999;
  background-color: #FFFFFF;
}

#messagecontframe
{
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
}

#messagepartframe
{
  width: 100%;
  height: 100%;
  border: 1px solid #999999;
  background-color: #FFFFFF;
}


#partheader
{
  position: absolute;
  top: 10px;
  left: 220px;
  right: 20px;
  height: 40px;
}

#partheader table td
{
  padding-left: 2px;
  padding-right: 4px;
  vertical-align: middle;
  font-size: 11px;
}

#partheader table td.title
{
  color: #666666;
  font-weight: bold;
}


/** mailbox list styles */

#mailboxlist-container
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  border: 1px solid #999;
  background-color: #FFFFFF;
  overflow: hidden;
}

#mailboxlist
{
  position:relative;
  height: auto;
  margin: 0px;
  padding: 0px;
  list-style-image: none;
  list-style-type: none;
  overflow: hidden;
  white-space: nowrap;
  background-color: #FFF;
}

#mailboxlist li
{
  display: block;
  position: relative;
  font-size: 11px;
  background: url(images/icons/folders.png) 5px 0 no-repeat;
  border-bottom: 1px solid #EBEBEB;
}

#mailboxlist li div
{
  position: absolute;
  left: 8px !important;
  left: -16px;
  top: 1px;
  width: 14px;
  height: 16px;
}

#mailboxlist li div.collapsed,
#mailboxlist li div.expanded
{
  cursor: pointer;
}

#mailboxlist li div.collapsed
{
  background: url(images/icons/collapsed.png) bottom right no-repeat;
}

#mailboxlist li div.expanded
{
  background: url(images/icons/expanded.png) bottom right no-repeat;
}

#mailboxlist li.inbox
{
  background-position: 5px -18px;
}

#mailboxlist li.drafts
{
  background-position: 5px -37px;
}

#mailboxlist li.sent
{
  background-position: 5px -54px;
}

#mailboxlist li.junk
{
  background-position: 5px -73px;
}

#mailboxlist li.trash
{
  background-position: 5px -91px;
}

#mailboxlist li a
{
  cursor: default;
  display: block;
  position: relative;
  padding-left: 25px;
  padding-top: 2px;
  padding-bottom: 2px;
  text-decoration: none;
}

#mailboxlist li.unread
{
  font-weight: bold;
}

#mailboxlist li.virtual > a
{
  color: #666;
}

#mailboxlist li.selected,
#mailboxlist li.droptarget li.selected
{
  background-color: #929292;
}

#mailboxlist li.selected > a,
#mailboxlist li.droptarget li.selected a
{
  color: #FFF;
  font-weight: bold;
}

#mailboxlist li.droptarget
{
  background-color: #FFFFA6;
}

/* styles for nested folders */
#mailboxlist ul {
  list-style: none;
  padding: 0;
  margin:0;
  border-top: 1px solid #EBEBEB;  
  padding-left: 15px;
  background-position: 25px 1px;
  background-color: #FFF;
  color: blue;
  font-weight: normal;
}

#listcontrols
{
  position: relative;
  white-space: nowrap;
  left: 4px;
  line-height: 22px;
  width: auto;
  min-width: 300px;
}

#listcontrols a,
#listcontrols span
{
  display: block;
  float: left;
  font-size: 11px;
}

#listcontrols input
{
  margin-top: 6px;
}

#listcontrols a.button,
#listcontrols a.buttonPas
{
  display: block;
  float: left;
  width: 15px;
  height: 15px;
  padding: 0;
  margin-top: 4px;
  margin-right: 2px;
  overflow: hidden;
  background: url(images/mail_footer.png) 0 0 no-repeat transparent;
  opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
}

#listcontrols a.buttonPas
{
  opacity: 0.35;
}

#listcontrols a.all {
  background-position: -30px 0;
}

#listcontrols a.allsel {
  background-position: -30px -15px;
}

#listcontrols a.page {
  background-position: -135px 0;
}

#listcontrols a.pagesel {
  background-position: -135px -15px;
}

#listcontrols a.unread {
  background-position: -45px 0;
}

#listcontrols a.unreadsel {
  background-position: -45px -15px;
}

#listcontrols a.invert {
  background-position: -60px 0;
}

#listcontrols a.invertsel {
  background-position: -60px -15px;
}

#listcontrols a.none {
  background-position: -75px 0;
}

#listcontrols a.nonesel {
  background-position: -75px -15px;
}

#listcontrols a.expand-all {
  background-position: -90px 0;
}

#listcontrols a.expand-allsel {
  background-position: -90px -15px;
}

#listcontrols a.collapse-all {
  background-position: -105px 0;
}

#listcontrols a.collapse-allsel {
  background-position: -105px -15px;
}

#listcontrols a.expand-unread {
  background-position: -120px 0;
}

#listcontrols a.expand-unreadsel {
  background-position: -120px -15px;
}

#countcontrols
{
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 25em;
  white-space: nowrap;
  font-size: 11px;
}

#countcontrols a.button,
#countcontrols a.buttonPas
{
  float: right;
}


/** message list styles */

body.messagelist
{
  margin: 0px;
  background-color: #FFFFFF;
}

#messagelist
{
  width: 100%;
  display: table;
  table-layout: fixed;
}

#messagelist thead tr td
{
  height: 20px;
  padding: 0 4px 0 2px;
  vertical-align: middle;
  border-bottom: 1px solid #999999;
  color: #333333;
  background: url(images/listheader.gif) top left repeat-x #CCC;
  font-size: 11px;
  font-weight: bold;
}

#messagelist thead tr td.sortedASC,
#messagelist thead tr td.sortedDESC
{
  background-position: 0 -22px;
}

#messagelist thead tr td.sortedASC a
{
  background: url(images/icons/sort.gif) right 0 no-repeat;
}

#messagelist thead tr td.sortedDESC a
{
  background: url(images/icons/sort.gif) right -14px no-repeat;
}

#messagelist thead tr td a
{
  display: block;
  width: auto !important;
  width: 100%;
  color: #333333;
  text-decoration: none;
}

#messagelist thead tr td.size
{
  text-align: left;
}

#messagelist thead tr td.subject
{
  padding-left: 18px;
}

#messagelist tbody tr td
{
  height: 20px;
  padding: 0;
  font-size: 11px;
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  border-bottom: 1px solid #EBEBEB;
  cursor: default;
}

#messagelist tbody tr td a
{
  color: #000;
  text-decoration: none;
  white-space: nowrap;
  cursor: inherit;
}

#messagelist tr td.icon,
#messagelist tr td.threads,
#messagelist tr td.attachment,
#messagelist tr td.flag
{
  width: 18px;
  padding: 0px 1px 1px 3px;
}

#messagelist tbody td span.branch,
#messagelist tbody td img
{
  vertical-align: middle;
  display: inline-block;
}

#messagelist tbody td img.msgicon
{
  margin: 0 2px;
}

#messagelist tr td div.collapsed,
#messagelist tr td div.expanded,
#messagelist tr td img.flagicon,
#messagelist tr td img.msgicon,
#messagelist tbody tr td.flag
{
  cursor: pointer;
}

#messagelist tr td div.collapsed
{
  background: url(images/messageactions.png) -1px -91px no-repeat;
}

#messagelist tr td div.expanded
{
  background: url(images/messageactions.png) -1px -109px no-repeat;
}

#messagelist tbody tr td.flag img:hover,
#messagelist thead tr td.flag img
{
  background: url(images/icons/unflagged.png) center no-repeat;
}

#messagelist tbody tr td.subject
{
  width: 99%;
}

#messagelist tbody tr td.subject a
{
  cursor: default;
}

/* thread parent message with unread children */
#messagelist tbody tr.unroot td.subject a
{
  text-decoration: underline;
}

#messagelist tr td.size
{
  width: 60px;
  text-align: right;
  padding: 0 2px;
}

#messagelist tr td.from,
#messagelist tr td.to,
#messagelist tr td.cc,
#messagelist tr td.replyto
{
  width: 180px;
  padding: 0 2px;
}

#messagelist tr td.date
{
  width: 118px;
  padding: 0 2px;
}

#messagelist tr.message
{
  background-color: #FFF;
}

/*
#messagelist tr.odd
{
  background-color: #FFFFFF;
}
*/

#messagelist tr.unread
{
  font-weight: bold;
  background-color: #FFFFFF;
}

#messagelist tr.flagged td,
#messagelist tr.flagged td a
{
  color: #CC0000;
}

#messagelist tr.selected td
{
  color: #FFFFFF;
  background-color: #9BA1BB;
}

#messagelist tr.unfocused td
{
  color: #FFFFFF;
  background-color: #929292;
}

#messagelist tr.selected td a
{
  color: #FFFFFF;
}

#messagelist tr.unfocused td a
{
  color: #FFFFFF;
}

#messagelist tr.deleted td,
#messagelist tr.deleted td a
{
  color: #CCCCCC;
}

#listmenu
{
  padding: 6px;
}

#listmenu legend
{
  color: #999999;
}

#listmenu fieldset
{
  border: 1px solid #999999;
  margin: 0 5px;
  float: left;
}

#listmenu div
{
  padding: 8px 0 3px 0;
  text-align: center;
  clear: both;
}

/***** tree indicators *****/

td span.branch div
{
  float: left;
  height: 16px;
}

td span.branch div.tree
{
  height: 17px;
  width: 15px;
  background: url(images/tree.gif) 0px 0px no-repeat;
}

td span.branch div.l1
{
  background-position: 0px 0px; /* L */
}

td span.branch div.l2
{
  background-position: -30px 0px; /* | */
}

td span.branch div.l3
{
  background-position: -15px 0px; /* |- */
}


/** message view styles */

#messageframe
{
  position: absolute;
  top: 0;
  left: 180px;
  right: 0;
  bottom: 0;
  border: 1px solid #999;
  background-color: #FFF;
  overflow: auto;
  z-index: 1;
}

div.messageheaderbox
{
  margin: 6px 8px 0px 8px;
  border: 1px solid #ccc;
}

table.headers-table
{
  width: 100%;
  background-color: #EBEBEB;
  table-layout: fixed;
}

#messagebody table.headers-table
{
  width: auto;
  margin: 6px 8px;
  background-color: #F4F4F4;
  border: 1px solid #ccc;
}

#messageframe table.headers-table
{
  border-bottom: 1px solid #ccc;
}

table.headers-table tr td
{
  font-size: 11px;
  border-bottom:1px solid #FFFFFF;
}

table.headers-table td.header-title
{
  width: 80px;
  color: #666666;
  font-weight: bold;
  text-align: right;
  white-space: nowrap;
  padding-right: 4px;
}

table.headers-table tr td.subject
{
  width: 90%;
  font-weight: bold;
}

table.headers-table tr td.all
{
  width: 100%;
  color: #666666;
  text-align: left;
  padding-right: 10px;
  text-align: center;
  padding: 2px 6px 4px 6px;
  border-bottom: 0;
}

table.headers-table tr td.more-headers
{
  cursor: pointer;
  width: 100%;
  height: 8px;
  border-bottom: 0;
}

#attachment-list
{
  margin: 0px;
  padding: 0px 0px 0px 72px;
  min-height: 16px;
  list-style-image: none;
  list-style-type: none;
  background: url(images/icons/attachment.png) 60px 2px no-repeat #DFDFDF;
}

#attachment-list:after
{
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

#attachment-list li
{
  float: left;
  height: 18px;
  font-size: 11px;
  padding: 2px 0px 0px 15px;
  white-space: nowrap;
}

#attachment-list li a
{
  text-decoration: none;
}

#attachment-list li a:hover
{
  text-decoration: underline;
}

#messagebody
{
  position:relative;
  padding-bottom: 10px;
  background-color: #FFFFFF;
}

div.message-part,
div.message-htmlpart
{
  padding: 10px 8px;
  border-top: 1px solid #ccc;
/*  overflow: hidden; */
}

#messagebody div:first-child
{
  border-top: 0;
}

div.message-part a,
div.message-htmlpart a
{
  color: #0000CC;
}

div.message-part pre,
div.message-htmlpart pre,
div.message-part div.pre
{
  margin: 0px;
  padding: 0px;
  font-family: monospace;
  white-space: -moz-pre-wrap !important;
  white-space: pre-wrap !important;
  white-space: pre;
}

div.message-part span.sig
{
  color: #666666;
}

div.message-part blockquote
{
  color: blue;
  border-left: 2px solid blue;
  border-right: 2px solid blue;
  background-color: #F6F6F6;
  margin: 2px 0px 2px 0px;
  padding: 1px 8px 1px 10px;
}

div.message-part blockquote blockquote
{
  color: green;
  border-left: 2px solid green;
  border-right: 2px solid green;
}

div.message-part blockquote blockquote blockquote
{
  color: #990000;
  border-left: 2px solid #bb0000;
  border-right: 2px solid #bb0000;
}

body.iframe div.message-htmlpart
{
  margin: 8px;
}

div.message-htmlpart div.rcmBody
{
  margin: 8px;
}

#remote-objects-message
{
  display: none;
  margin: 8px;
  min-height: 20px;
  padding: 10px 10px 6px 46px;
}

#remote-objects-message a
{
  color: #666666;
  padding-left: 10px;
}

#remote-objects-message a:hover
{
  color: #333333;
}

#messageviewlink
{
  position: absolute;
  top: 8px;
  right: 10px;
  width: 15px;
  height: 15px;
  border: 0;
}

td.show-headers
{
  background: url(images/icons/down_small.gif) no-repeat center;
}

td.hide-headers
{
  background: url(images/icons/up_small.gif) no-repeat center;
}

#all-headers
{
  height: 150px;
  display: none;
}

#headers-source
{
  margin: 0 5px;
  padding: 0.5em;
  height: 145px;
  background: white;
  overflow: auto;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid #999999;
  display: none;
  text-align: left;
  color: #333;
}


/** message compose styles */

#compose-container
{
  position: absolute;
  top: 0;
  left: 185px;
  right: 0;
  bottom: 0;
  margin: 0;
}

#compose-div
{
  position: absolute;
  top: 85px;
  bottom: 0;
  margin: 0;
  width: 100%;
}

#compose-div .boxfooter
{
  height: 22px;
  background: none;
  border-top: 0;
}

#compose-div .boxlistcontent
{
  bottom: 23px;
}

#compose-body
{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0;
  font-size: 9pt;
  font-family: monospace;
  border: 1px solid #999;
  resize: none;
}

#compose-headers
{
  width: 100%;
}

#compose-headers td.editfield
{
  padding-right: 8px;
  width: 95%;
}

#compose-headers td.top
{
  vertical-align: top;
}

#compose-headers td.title,
#compose-subject td.title
{
  width: 80px !important;
  font-size: 11px;
  font-weight: bold;
  padding-right: 10px;
  white-space: nowrap;
  color: #666;
}

#compose-headers td textarea,
#compose-headers td input
{
  resize: none;
  width: 100%;
  border: 1px solid #999;
}

#compose-headers td textarea
{
  height: 32px;
}

#compose-cc,
#compose-bcc,
#compose-replyto
{
  display: none;
}

#formlinks a,
#formlinks a:visited
{
  color: #999999;
  font-size: 11px;
  text-decoration: none;
}

#formlinks a,
#formlinks a:visited
{
  color: #CC0000;
}

#compose-editorfooter
{
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: right;
}

#compose-editorfooter label
{
  font-size: 11px;
  font-weight: bold;
  color: #666;
}

#compose-buttons
{
  position: absolute;
  left: 0;
  bottom: 0;
  width: auto;
}

#compose-attachments
{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 175px;
  border: 1px solid #999;
  background-color: #FFFFFF;
}

#compose-attachments ul
{
  margin: 0px;
  padding: 0px;
  background-color: #FFF;
  list-style-image: none;
  list-style-type: none;
}

#compose-attachments ul li
{
  height: 18px;
  font-size: 11px;
  padding-left: 2px;
  padding-top: 2px;
  padding-right: 4px;
  border-bottom: 1px solid #EBEBEB;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

#compose-attachments ul li img
{
  padding-right: 2px;
  vertical-align: middle;
}

#attachment-form
{
  padding: 6px;
}

#attachment-form div
{
  padding: 2px;
}

#attachment-form div.buttons
{
  margin-top: 4px;
}


/** quota indicator */

#quota
{
  position: absolute;
  top: 3px;
  right: 8px;
  width: 100px;
}

#quotaimg
{
  position: absolute;
  top: 3px;
  right: 6px;
  z-index: 101;
}

.quota_text {
  text-align: center;
  font-size: 10px;
  color: #666;
  border: 1px solid #999;
  cursor: default;
}
.quota_bg { background-color: white; }
.quota_high { background-color: #F33131; }
.quota_mid { background-color: #F5AD3C; }
.quota_low { background-color: #91E164; }
.quota_text_high { color: white; }
.quota_text_mid { color: #666; }
.quota_text_low { color: #666; }

mail.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><crystalmail:object name="pagetitle" /></title>
<crystalmail:include file="/includes/links.html" />
<script type="text/javascript" src="/splitter.js"></script>
<script type="text/javascript" src="/functions.js"></script>
</head>
<body onload="crystal_init_mail_ui()">

<crystalmail:include file="/includes/taskbar.html" />
<crystalmail:include file="/includes/header.html" />

<div id="mainscreen">
<div id="mailleftcontainer">
<div id="mailboxlist-container">
<div id="mailboxlist-title" class="boxtitle"><crystalmail:label name="mailboxlist" /></div>
<div class="boxlistcontent">
<crystalmail:object name="mailboxlist" id="mailboxlist" maxlength="25" />
</div>
<div class="boxfooter">
  <crystalmail:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="button groupactions" onclick="cmail_ui.show_popup('mailboxmenu');return false" content=" " />

<crystalmail:if condition="env:quota" />
<img id="quotaimg" src="/images/quota.gif" alt="" />
<div id="quota">
  <crystalmail:object name="quotaDisplay" display="image" width="100" height="14" id="quotadisplay" />
</div>
<crystalmail:endif />
</div>
</div>

<script type="text/javascript">
  var mailviewsplitv = new crystal_splitter({id:'mailviewsplitterv', p1: 'mailleftcontainer', p2: 'mailrightcontainer', orientation: 'v', relative: true, start: 165});
  cmail.add_onload('mailviewsplitv.init()');
</script>

</div>

<div id="mailrightcontainer">
<div id="mailrightcontent">
<div id="mailcontframe">
<div id="messagelistcontainer" class="boxlistcontent" style="top:0">
<crystalmail:object name="messages"
  id="messagelist"
  cellspacing="0"
  columns=""
  summary="Message list"
  messageIcon="/images/icons/dot.png"
  unreadIcon="/images/icons/unread.png"
  deletedIcon="/images/icons/deleted.png"
  repliedIcon="/images/icons/replied.png"
  forwardedIcon="/images/icons/forwarded.png"
  forwardedrepliedIcon="/images/icons/forwarded_replied.png"
  attachmentIcon="/images/icons/attachment.png"
  flaggedIcon="/images/icons/flagged.png"
  unflaggedIcon="/images/icons/blank.gif"
  unreadchildrenIcon="" 
  optionsmenuIcon="/images/icons/columnpicker.gif" />
</div>
<div class="boxfooter">
    <div id="listcontrols" class="pagenav">
        <span><crystalmail:label name="select" />:&nbsp;</span>
        <crystalmail:button command="select-all" type="link" title="all" class="buttonPas all" classAct="button all" classSel="button allsel" content=" " />
        <crystalmail:button command="select-all" type="link" prop="page" title="currpage" class="buttonPas page" classAct="button page" classSel="button pagesel" content=" " />
        <crystalmail:button command="select-all" type="link" prop="unread" title="unread" class="buttonPas unread" classAct="button unread" classSel="button unreadsel" content=" " />
        <crystalmail:button command="select-all" type="link" prop="invert" title="invert" class="buttonPas invert" classAct="button invert" classSel="button invertsel" content=" " />
        <crystalmail:button command="select-none" type="link" title="none" class="buttonPas none" classAct="button none" classSel="button nonesel" content=" " />
        <crystalmail:container name="listcontrols" id="listcontrols" />
    <crystalmail:if condition="env:threads" />
        <span style="margin-left: 12px"><crystalmail:label name="threads" />:&nbsp;</span>
        <crystalmail:button command="expand-all" type="link" title="expand-all" class="buttonPas expand-all" classAct="button expand-all" classSel="button expand-allsel" content=" "  />
        <crystalmail:button command="expand-unread" type="link" title="expand-unread" class="buttonPas expand-unread" classAct="button expand-unread" classSel="button expand-unreadsel" content=" " />
        <crystalmail:button command="collapse-all" type="link" title="collapse-all" class="buttonPas collapse-all" classAct="button collapse-all" classSel="button collapse-allsel" content=" " />
    <crystalmail:endif />
    <crystalmail:if condition="!in_array('preview_pane', (array)config:dont_override)" />
        <label><span style="margin-left: 12px"><crystalmail:label name="previewpane" />:&nbsp;</span>
        <input type="checkbox" onclick="cmail_ui.switch_preview_pane(this)"<crystalmail:exp expression="config:preview_pane == true ? ' checked=checked' : ''" /> /></label>
    <crystalmail:endif />
    </div>
    <div id="countcontrols" class="pagenav">
        <crystalmail:button command="lastpage" type="link" class="buttonPas lastpage" classAct="button lastpage" classSel="button lastpageSel" title="lastmessages" content=" " />
        <crystalmail:button command="nextpage" type="link" class="buttonPas nextpage" classAct="button nextpage" classSel="button nextpageSel" title="nextmessages" content=" " />
        <crystalmail:object name="messageCountDisplay" style="padding:0 .5em; float:right" />
        <crystalmail:button command="previouspage" type="link" class="buttonPas prevpage" classAct="button prevpage" classSel="button prevpageSel" title="previousmessages" content=" " />
        <crystalmail:button command="firstpage" type="link" class="buttonPas firstpage" classAct="button firstpage" classSel="button firstpageSel" title="firstmessages" content=" " />
    </div>
</div>
</div>

<script type="text/javascript">
  var mailviewsplit = new crystal_splitter({id:'mailviewsplitter', p1: 'mailcontframe', p2: 'mailpreviewframe', orientation: 'v', relative: true, start: 205});
<crystalmail:if condition="config:preview_pane == true" />
  cmail.add_onload('mailviewsplit.init()');
<crystalmail:endif />
</script>

<div id="mailpreviewframe"<crystalmail:if condition="config:preview_pane != true" /> style="display:none"<crystalmail:endif />>
<crystalmail:object name="messagecontentframe" id="messagecontframe" width="100%" height="100%" frameborder="0" src="/watermark.html" />
</div>
</div>


</div>
</div>

<div id="messagetoolbar">
<crystalmail:button command="checkmail" type="link" class="button checkmail" classAct="button checkmail" classSel="button checkmailSel" title="checkmail" content=" " />
<crystalmail:button command="compose" type="link" class="button compose" classAct="button compose" classSel="button composeSel" title="writenewmessage" content=" " />
<crystalmail:button command="reply" type="link" class="buttonPas reply" classAct="button reply" classSel="button replySel" title="replytomessage" content=" " />
<crystalmail:button command="reply-all" type="link" class="buttonPas replyAll" classAct="button replyAll" classSel="button replyAllSel" title="replytoallmessage" content=" " />
<crystalmail:button command="forward" type="link" class="buttonPas forward" classAct="button forward" classSel="button forwardSel" title="forwardmessage" content=" " />
<crystalmail:button command="delete" type="link" class="buttonPas delete" classAct="button delete" classSel="button deleteSel" title="deletemessage" content=" " />
<crystalmail:container name="toolbar" id="messagetoolbar" />
<crystalmail:button name="markmenulink" id="markmenulink" type="link" class="button markmessage" title="markmessages" onclick="cmail_ui.show_popup('markmenu');return false" content=" " />
<crystalmail:button name="messagemenulink" id="messagemenulink" type="link" class="button messagemenu" title="messageactions" onclick="cmail_ui.show_popup('messagemenu');return false" content=" " />
</div>

<div id="markmessagemenu" class="popupmenu">
  <ul class="toolbarmenu">
    <li><crystalmail:button command="mark" prop="read" label="markread" classAct="readlink active" class="readlink" /></li>
    <li><crystalmail:button command="mark" prop="unread" label="markunread" classAct="unreadlink active" class="unreadlink" /></li>
    <li><crystalmail:button command="mark" prop="flagged" label="markflagged" classAct="flaggedlink active" class="flaggedlink" /></li>
    <li><crystalmail:button command="mark" prop="unflagged" label="markunflagged" classAct="unflaggedlink active" class="unflaggedlink" /></li>
    <crystalmail:container name="markmenu" id="markmessagemenu" />
  </ul>
</div>

<crystalmail:include file="/includes/messagemenu.html" />

<div id="searchmenu" class="popupmenu">
  <ul class="toolbarmenu">
    <li><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" onclick="cmail_ui.set_searchmod(this)" /><label for="s_mod_subject"><crystalmail:label name="subject" /></label></li>
    <li><input type="checkbox" name="s_mods[]" value="from" id="s_mod_from" onclick="cmail_ui.set_searchmod(this)" /><label for="s_mod_from"><crystalmail:label name="from" /></label></li>
    <li><input type="checkbox" name="s_mods[]" value="to" id="s_mod_to" onclick="cmail_ui.set_searchmod(this)" /><label for="s_mod_to"><crystalmail:label name="to" /></label></li>
    <li><input type="checkbox" name="s_mods[]" value="cc" id="s_mod_cc" onclick="cmail_ui.set_searchmod(this)" /><label for="s_mod_cc"><crystalmail:label name="cc" /></label></li>
    <li><input type="checkbox" name="s_mods[]" value="bcc" id="s_mod_bcc" onclick="cmail_ui.set_searchmod(this)" /><label for="s_mod_bcc"><crystalmail:label name="bcc" /></label></li>
    <li><input type="checkbox" name="s_mods[]" value="text" id="s_mod_text" onclick="cmail_ui.set_searchmod(this)" /><label for="s_mod_text"><crystalmail:label name="msgtext" /></label></li>
  </ul>
</div>

<div id="quicksearchbar">
<div id="searchfilter">
  <label for="rcmlistfilter"><crystalmail:label name="filter" /></label>:
  <crystalmail:object name="searchfilter" class="searchfilter" />
</div>
<div id="searchfield">
<crystalmail:button name="searchmenulink" id="searchmenulink" image="/images/icons/glass_roll.png" onclick="cmail_ui.show_popup('searchmenu');return false" title="searchmod" />
<crystalmail:object name="searchform" id="quicksearchbox" />
<crystalmail:button command="reset-search" id="searchreset" image="/images/icons/reset.gif" title="resetsearch" />
</div>
</div>
<div id="dragmessagemenu" class="popupmenu">
  <ul>
    <li><crystalmail:button command="moveto" onclick="return cmail.drag_menu_action('moveto')" label="move" classAct="active" /></li>
    <li><crystalmail:button command="copy" onclick="return cmail.drag_menu_action('copy')" label="copy" classAct="active" /></li>
  </ul>
</div>

<div id="mailboxoptionsmenu" class="popupmenu">
  <ul>
    <li><crystalmail:button command="expunge" type="link" label="compact" classAct="active" /></li>
    <li class="separator_below"><crystalmail:button command="purge" type="link" label="empty" classAct="active" /></li>
    <li><crystalmail:button command="folders" task="settings" type="link" label="managefolders" classAct="active" /></li>
    <crystalmail:container name="mailboxoptions" id="mailboxoptionsmenu" />
  </ul>
</div>

<div id="listmenu" class="popupmenu">
<crystalmail:if condition="env:threads" />
<fieldset class="thinbordered"><legend><crystalmail:label name="listmode" /></legend>
  <ul class="toolbarmenu">
    <li><input type="radio" name="view" value="list" id="view_default" /><label for="view_default"><crystalmail:label name="list" /></label></li>
    <li><input type="radio" name="view" value="thread" id="view_thread" /><label for="view_thread"><crystalmail:label name="threads" /></label></li>
  </ul>
</fieldset>
<crystalmail:endif />
<crystalmail:if condition="!in_array('list_cols', (array)config:dont_override)" />
<fieldset class="thinbordered"><legend><crystalmail:label name="listcolumns" /></legend>
  <ul class="toolbarmenu">
    <li><input type="checkbox" name="list_col[]" value="threads" id="cols_threads" checked="checked" disabled="disabled" /><label for="cols_threads" class="disabled"><crystalmail:label name="threads" /></label></li>
    <li><input type="checkbox" name="list_col[]" value="subject" id="cols_subject" checked="checked" disabled="disabled" /><label for="cols_subject" class="disabled"><crystalmail:label name="subject" /></label></li>
    <li><input type="checkbox" name="list_col[]" value="from" id="cols_fromto" /><label for="cols_fromto"><crystalmail:label name="fromto" /></label></li>
    <li><input type="checkbox" name="list_col[]" value="replyto" id="cols_replyto" /><label for="cols_replyto"><crystalmail:label name="replyto" /></label></li>
    <li><input type="checkbox" name="list_col[]" value="cc" id="cols_cc" /><label for="cols_cc"><crystalmail:label name="cc" /></label></li>
    <li><input type="checkbox" name="list_col[]" value="date" id="cols_date" /><label for="cols_date"><crystalmail:label name="date" /></label></li>
    <li><input type="checkbox" name="list_col[]" value="size" id="cols_size" /><label for="cols_size"><crystalmail:label name="size" /></label></li>
    <li><input type="checkbox" name="list_col[]" value="attachment" id="cols_attachment" /><label for="cols_attachment"><crystalmail:label name="attachment" /></label></li>
    <li><input type="checkbox" name="list_col[]" value="flag" id="cols_flag" /><label for="cols_flag"><crystalmail:label name="flag" /></label></li>
  </ul>
</fieldset>
<crystalmail:endif />
<crystalmail:if condition="!in_array('message_sort_col', (array)config:dont_override)" />
<fieldset class="thinbordered"><legend><crystalmail:label name="listsorting" /></legend>
  <ul class="toolbarmenu">
    <li><input type="radio" name="sort_col" value="" id="sort_default" /><label for="sort_default"><crystalmail:label name="nonesort" /></label></li>
    <li><input type="radio" name="sort_col" value="arrival" id="sort_arrival" /><label for="sort_arrival"><crystalmail:label name="arrival" /></label></li>
    <li><input type="radio" name="sort_col" value="date" id="sort_date" /><label for="sort_date"><crystalmail:label name="sentdate" /></label></li>
    <li><input type="radio" name="sort_col" value="subject" id="sort_subject" /><label for="sort_subject"><crystalmail:label name="subject" /></label></li>
    <li><input type="radio" name="sort_col" value="from" id="sort_fromto" /><label for="sort_fromto"><crystalmail:label name="fromto" /></label></li>
    <li><input type="radio" name="sort_col" value="to" id="sort_replyto" /><label for="sort_replyto"><crystalmail:label name="replyto" /></label></li>
    <li><input type="radio" name="sort_col" value="cc" id="sort_cc" /><label for="sort_cc"><crystalmail:label name="cc" /></label></li>
    <li><input type="radio" name="sort_col" value="size" id="sort_size" /><label for="sort_size"><crystalmail:label name="size" /></label></li>
  </ul>
</fieldset>
<crystalmail:endif />
<crystalmail:if condition="!in_array('message_sort_order', (array)config:dont_override)" />
<fieldset><legend><crystalmail:label name="listorder" /></legend> 
	  <ul class="toolbarmenu"> 
	    <li><input type="radio" name="sort_ord" value="ASC" id="sort_asc" /><label for="sort_asc"><crystalmail:label name="asc" /></label></li> 
	    <li><input type="radio" name="sort_ord" value="DESC" id="sort_desc" /><label for="sort_desc"><crystalmail:label name="desc" /></label></li> 
	  </ul> 
</fieldset>
<crystalmail:endif />
<div>
  <crystalmail:button command="menu-open" id="listmenucancel" type="input" class="button" label="cancel" />
  <crystalmail:button command="menu-save" id="listmenusave" type="input" class="button mainaction" label="save" />
</div>
</div>

</body>
</html>

removed the top margin in mail.css under #mailpreviewframe
and changed min-width under #mailrightcontainer to 300px in an attempt to fix the width issue.

updated mail.css under #messagecontentframe changed to-
position: absolute;
top: 0px;
right:0px;
bottom: 0px;
border: 1px solid #999999;
background-color: #FFFFFF;