Descrição da Questão:
Quando clica em 'RESPONDER', num tópico, a página que abre é de um formulário, e do lado da caixa, fica os emoticons. Mas, os emoticons ocupam muito 'espaço'...

O que necessito é que coloque os emoticons num botão, dentro do formulário, e a caixa, enfim, fique mais livre, maior.

Isto é possível?

Endereço e Versão do Site/Fórum:
http://habbojoy.forumeiros.com/ - PunBB

Imagem Sugestiva:

https://i.imgur.com/iT4o5lO.png Clique no ícone para visualizar a imagem.

Sim, isto é possível, porém é extremamente complicado.
Seria mais simples colocar a caixa em baixo e da mesma largura da caixa de edição.
Se quiseres uma demonstração, me passe o seu template posting_body

Era EXACTAMENTE ISSO que eu queria, mas ninguém me ajudou anteriormente, achei que fosse impossível. =x
Agora sim fiquei feliz. Vou pegar aqui, momento.

Aqui:

Código:

<script src="{JS_DIR}extendedview.js" type="text/JavaScript"></script>
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
   <ul>
      <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
      <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
   </ul>
   <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
   <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<div class="pun-crumbs">
   <p class="crumbs">
      <a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC} » <strong>{L_NEW_OR_EDIT_POST}</strong>
   </p>
</div>

{ERROR_BOX}

<div class="main">
<form action="{S_POST_ACTION}" class="frm-form" method="post" name="post" enctype="multipart/form-data">

{POST_PREVIEW_BOX}

<!-- BEGIN switch_forum_rules -->
<div id="forum_rules">
   <div class="main-head clearfix">
      <p class="h2">{L_FORUM_RULES}</p>
   </div>
   <table class="main-content frm">
      <tr>
         <!-- BEGIN switch_forum_rule_image -->
         <td class="logo">
            <img src="{RULE_IMG_URL}" />
         </td>
         <!-- END switch_forum_rule_image -->
         <td class="rules entry-content">
            {RULE_MSG}
         </td>
      </tr>
   </table>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_quote_limit -->
<div class="main">
   <div class="main-head"></div>
   <div class="main-content warning">
      <p class="center">{switch_quote_limit.L_QUOTE_LIMIT_WARNING}</p>
      <br />
   </div>
</div>
<!-- END switch_quote_limit -->

<div class="main-head clearfix">
   <p class="h2"><!-- BEGIN switch_post_a -->{L_POST_A}<!-- END switch_post_a --></p>
   <p class="options">
      <a class="exthelp" title="{L_HELP}" href="http://{URL_FORUM}{U_FAQ}" target="_blank">{L_BBCODE_GUIDE}</a>
   </p>
</div>

<div class="main-content frm">
   <fieldset class="frm-set multi">
      <!-- BEGIN switch_username_select -->
      <dl>
         <dt><label>{L_USERNAME}</label></dt>
         <dd><input type="text" name="username"  maxlength="25" value="{USERNAME}" /></dd>
      </dl>
      <!-- END switch_username_select -->

      <!-- BEGIN switch_reasons -->
      <dl>
         <dt><label>{L_REASON}</label></dt>
         <dd>{REASON_NEW}</dd>
      </dl>
      <!-- END switch_reasons -->

      <!-- BEGIN switch_privmsg -->
      <dl>
         <dt><label>{L_USERNAME}</label></dt>
         <dd>
            <!-- BEGIN switch_username -->
            <input style="margin-top:2px" type="text" name="username[]" value="{switch_privmsg.switch_username.USERNAME}" /><br />
            <!-- END switch_username -->
            <input style="margin-top:2px" type="text" id="username" name="username[]" value="{USERNAME}" tabindex="1" /> 
            <img id="add_username" src="{ADD_USERNAME_IMG}" class="selectHover" alt="" /> 
            <input type="button" id="find_user" value="{L_FIND_USERNAME}" />
         </dd>
      </dl>
      <!-- BEGIN switch_privmsg_friend -->
      <dl>
         <dt><label>{switch_privmsg.switch_privmsg_friend.L_OR_FRIEND}</label></dt>
         <dd>{switch_privmsg.switch_privmsg_friend.FRIEND_PM}</dd>
      </dl>
      <!-- END switch_privmsg_friend -->
      <!-- BEGIN switch_privmsg_group -->
      <dl>
         <dt><label>{switch_privmsg.switch_privmsg_group.L_OR_GROUP}</label></dt>
         <dd>{switch_privmsg.switch_privmsg_group.MASS_PM}</dd>
      </dl>
      <!-- END switch_privmsg_group -->
      <!-- END switch_privmsg -->

      <!-- BEGIN switch_icon_checkbox -->
      <dl>
         <dt style="padding-top:14px"><label>{L_ICON_TITLE}</label></dt>
         <dd>
            <!-- BEGIN row -->
            <!-- BEGIN cell -->
            <label style="vertical-align:bottom">

               <input type="radio" name="post_icon" tabindex="2" value="{switch_icon_checkbox.row.cell.ICON_ID}" {switch_icon_checkbox.row.cell.ICON_CHECKED} id="post_icon_{switch_icon_checkbox.row.cell.ICON_ID}" /> 
               <span onclick="document.forms['post'].post_icon_{switch_icon_checkbox.row.cell.ICON_ID}.checked=true">{switch_icon_checkbox.row.cell.ICON_IMG}</span>
            </label>  
            <!-- END cell -->
            <!-- END row -->
         </dd>
      </dl>
      <!-- END switch_icon_checkbox -->

      <!-- BEGIN switch_subject -->
      <dl>
         <dt><label>{L_SUBJECT}</label></dt>
         <dd class="frm-input">
            <input type="text" name="subject" value="{SUBJECT}" maxlength="{TOPIC_TITLE_MAXLENGTH}" title="{TOPIC_TITLE_LENGTH_EXPLAIN}" onkeypress="if (event.keyCode==13){return false}" />

            <!-- BEGIN switch_subject_color -->
            <script type="text/JavaScript">
            //<![CDATA[
            input = document.getElementsByName('subject');
            //]]>
            </script>
            <select name="topic_color" onchange="input[0].style.color = topic_color.value" style="margin-left:10px">

            {switch_subject.switch_subject_color.TOPIC_TITLE_COLOR_OPTIONS}

            </select>
            <script type="text/JavaScript">
            //<![CDATA[
            input[0].style.color = '{switch_subject.switch_subject_color.TOPIC_TITLE_COLOR_DEFAULT}';
            //]]>
            </script>
            <!-- END switch_subject_color -->
         </dd>
      </dl>
      <!-- END switch_subject -->

      <!-- BEGIN switch_description -->
      <dl>
         <dt><label>{L_DESCRIPTION}</label></dt>
         <dd class="frm-input">
            <input type="text" name="description" value="{DESCRIPTION}" maxlength="{TOPIC_DESCRIPTION_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
         </dd>
      </dl>
      <!-- END switch_description -->

      <div id="text_editor_select_controls">
      <div class="left"><span id="helpbox" class="helpline"></span></div> <!-- must enclose helpbox in a floating div for ie bug -->
      <div class="clear"></div>

      <div id="textarea_content" class="posting-block" style="">
         <dl>
            <dt><label for="text_editor_textarea">{L_MESSAGE}</label></dt>
            <dd class="frm-textarea">
               <textarea id="text_editor_textarea" onclick="storeCaret(this)" rows="15" cols="9" onkeyup="storeCaret(this)" name="message" tabindex="3" onselect="storeCaret(this)" wrap="virtual" style="width:98%">{MESSAGE}</textarea><br />
            </dd>
         </dl>
         <!-- BEGIN edit_reason -->
         <br />
         <dl>
            <dt><label><span style="font-size:11px">{edit_reason.L_EDIT_REASON}</span></label></dt>
            <dd><input class="inputbox medium" style="width:63%" type="text" name="edit_reason" value="{edit_reason.EDIT_REASON}" maxlength="255"></dd>
         </dl>
         <!-- END edit_reason -->
      </div>
      <div id="smiley-box">
         <div id="smileyContainer">
         {L_SMILIES_PREVIEW_NEW}
         </div>
      </div>
      </fieldset>

      <fieldset class="frm-set">
         <dl>
            <dt>{L_INFORMATION}</dt>
            <dd>{HTML_STATUS}<br />
               {BBCODE_STATUS}<br />
               {SMILIES_STATUS}
            </dd>
         </dl>

         <div class="frm-buttons">
            {S_HIDDEN_FORM_FIELDS}
            <input type="hidden" name="lt" value="{LAST_TOPIC_ID}" />
            <!-- BEGIN switch_preview -->
            <input type="submit" name="preview" value="{L_PREVIEW}" tabindex="5" /> 
            <!-- END switch_preview -->
            <!-- BEGIN switch_draft -->
             <input type="submit" name="draft" value="{L_DRAFT}" tabindex="7" accesskey="d" /> 
            <!-- END switch_draft -->
            <!-- BEGIN switch_publish -->
             <input type="submit" name="publish" value="{L_PUBLISH}" tabindex="8" accesskey="p" /> 
            <!-- END switch_publish -->
             <input type="submit" name="post" value="{L_SUBMIT}" tabindex="6" accesskey="s" />
         </div>
      </fieldset>
</div>

<div class="main">
   <!-- BEGIN switch_roll_dice -->
   <div class="main-head clearfix">{ROLL_DICE_TITLE}</div>
   <div class="main-content frm">
      <script type="text/JavaScript">
         function add_dice(dice_number,dice,number)
         {
            var content = document.getElementById('post_dice').innerHTML;
            document.getElementById('dice_to_del').innerHTML = '';
            document.getElementById('dice_to_del').id = '';

            var new_tr = document.createElement('tr');
            new_tr.appendChild(document.createElement('td'));
            new_tr.firstChild.innerHTML = '{ROLL_DICE_TITLE_LOW} #' + (dice_number + 1) + ' : <select name="post_dice_' + dice_number + '" id="post_dice_' + dice_number + '" value="' + dice + '">' + content + '</select> <label for="nb_rolls">{switch_roll_dice.L_DICE_ROLLS} : </label><input type="text" size="2" maxlength="3" name="nb_rolls_' + dice_number + '" id="nb_rolls" value="' + number + '" /> <span id="dice_to_del"><a href="JavaScript:add_dice(' + (dice_number + 1) + ',\'\',1)"><img src="{PATH_IMG_FA}tabs_more.gif" alt="plus" /></a></span>';
            document.getElementById('list_dice').lastChild.appendChild(new_tr);

            var select_dice = document.getElementById('post_dice_' + dice_number);
            if ( dice == '' )
            {
               select_dice.selectedIndex=0;
            }
            for ( var i = 1; select_dice.options[i]; i++ )
            {
               select_dice.options[i].selected = ( select_dice.options[i].value == dice );
            }
         }
      </script>
      <table style="width:100%" id="list_dice"><tr><td>
         {ROLL_DICE_TITLE_LOW} #1 : 
         <select name="post_dice_0" id="post_dice">
            <option value="">-</option>
         <!-- BEGIN row_replace -->
            <option value="{switch_roll_dice.row_replace.DICE_ID}"{switch_roll_dice.row_replace.DICE_SELECTED}>{switch_roll_dice.row_replace.DICE_NAME}</option>
         <!-- END row_replace -->
         </select>
          <label for="nb_rolls">{switch_roll_dice.L_DICE_ROLLS} : </label><input type="text" size="2" maxlength="3" name="nb_rolls_0" id="nb_rolls" value="{switch_roll_dice.S_DICE_ROLLS_VALUE}" />
          <span id="dice_to_del"><a href="JavaScript:add_dice(1,'',1)"><img src="{PATH_IMG_FA}tabs_more.gif" alt="plus" /></a></span>
         </td></tr>
      </table>
      {switch_roll_dice.DICE_SCRIPT}
   </div>
   <!-- END switch_roll_dice -->

   <!-- BEGIN switch_attachment_list -->
   <div class="main-head clearfix">
      <p class="h2">{L_ATTACHMENTS}</p>
   </div>
   <div class="main-content frm">
      <fieldset class="frm-set multi">
      <!-- BEGIN attachments -->
         <dl>
                <dt><label>{L_ATTACHMENT_FILENAME}</label></dt>
                <dd>
                    <!-- BEGIN switch_is_orphan -->
                 <span class="gen">{switch_attachment_list.attachments.switch_is_orphan.FILENAME}</span>  
                    <!-- END switch_is_orphan -->
                    <!-- BEGIN switch_is_not_orphan -->
                 <a href="{switch_attachment_list.attachments.switch_is_not_orphan.U_ATTACH_URL}" class="gen">{switch_attachment_list.attachments.switch_is_not_orphan.FILENAME}</a>  
                    <!-- END switch_is_not_orphan -->
                 <input class="liteoption" type="submit" value="{L_ATTACHMENT_DELETE}" name="delete_file[{switch_attachment_list.attachments.ATTACH_POS}]" />
                </dd>
             <dt><label for="filecomment{switch_attachment_list.attachments.ATTACH_POS}">{L_ATTACH_COMMENT}</label></dt>
             <dd class="frm-input">
                 <!--textarea name="comment_list[{switch_attachment_list.attachments.ATTACH_POS}]" cols="35" rows="3" style="color:#000000;width:100%">{switch_attachment_list.attachments.ATTACH_COMMENT}</textarea><br /-->
                 <input type="text" id="filecomment{switch_attachment_list.attachments.ATTACH_POS}" name="comment_list[{switch_attachment_list.attachments.ATTACH_POS}]" value="{switch_attachment_list.attachments.ATTACH_COMMENT}" maxlength="255" />
                 <input type="hidden" value="{switch_attachment_list.attachments.ATTACH_ID}" name="attachment_data[{switch_attachment_list.attachments.ATTACH_POS}][attach_id]" />
                 <input type="hidden" value="{switch_attachment_list.attachments.IS_ORPHAN}" name="attachment_data[{switch_attachment_list.attachments.ATTACH_POS}][is_orphan]" />
                 <input type="hidden" value="{switch_attachment_list.attachments.REAL_FILENAME}" name="attachment_data[{switch_attachment_list.attachments.ATTACH_POS}][real_filename]" />
                 <input type="hidden" value="{switch_attachment_list.attachments.ATTACH_COMMENT}" name="attachment_data[{switch_attachment_list.attachments.ATTACH_POS}][attach_comment]" /><br /><br />
             </dd>
         </dl>
      <!-- END attachments -->
      </fieldset>
   </div>
   <!-- END switch_attachment_list -->

   <!-- BEGIN switch_attachment -->
   <div class="main-head clearfix">
      <p class="h2">{L_ATTACHMENT_ADD}</p>
   </div>
   <div class="main-content frm">
      <fieldset class="frm-set multi">
         {L_ATTACHMENT_ADD_HELP}<br /><span class="info">{EXT_LIST}</span><br /><br />

         <dl>
            <dt><label for="fileupload">{L_ATTACHMENT_FILENAME}</label></dt>
            <dd><input type="file" id="fileupload" name="fileupload" /><input type="submit" name="add_file" /> ({L_MAX_ATT_SIZE})</dd>
         </dl>

         <dl>
            <dt><label for="filecomment">{L_ATTACH_COMMENT}</label></dt>
            <dd class="frm-input"><input type="text" id="filecomment" name="filecomment" value="" maxlength="255" /></dd>
         </dl>
      </fieldset>
   </div>
   <!-- END switch_attachment -->

   <div class="main-head clearfix">
      <p class="h2">{L_OPTIONS}</p>
   </div>

   <div class="main-content frm">
      <fieldset class="frm-set multi">
         <!-- BEGIN switch_html_checkbox -->
         <label><input type="checkbox" name="disable_html"{S_HTML_CHECKED} /> {L_DISABLE_HTML}</label><br />
         <!-- END switch_html_checkbox -->

         <!-- BEGIN switch_bbcode_checkbox -->
         <label><input type="checkbox" name="disable_bbcode"{S_BBCODE_CHECKED} /> {L_DISABLE_BBCODE}</label><br />
         <!-- END switch_bbcode_checkbox -->

         <!-- BEGIN switch_smilies_checkbox -->
         <label><input type="checkbox" name="disable_smilies"{S_SMILIES_CHECKED} /> {L_DISABLE_SMILIES}</label><br />
         <!-- END switch_smilies_checkbox -->

         <!-- BEGIN switch_signature_checkbox -->
         <label><input type="checkbox" name="attach_sig"{S_SIGNATURE_CHECKED} /> {L_ATTACH_SIGNATURE}</label><br />
         <!-- END switch_signature_checkbox -->

         <!-- BEGIN switch_notify_checkbox -->
         <label><input type="checkbox" name="notify"{S_NOTIFY_CHECKED} /> {L_NOTIFY_ON_REPLY}</label><br />
         <!-- END switch_notify_checkbox -->

         <!-- BEGIN switch_delete_checkbox -->
         <label><input type="checkbox" name="delete" /> {L_DELETE_POST}</label><br />
         <!-- END switch_delete_checkbox -->

         <!-- BEGIN switch_type_toggle -->
         <br />{S_TYPE_TOGGLE}
         <!-- END switch_type_toggle -->
      </fieldset>

      <!-- BEGIN switch_topic_modif -->
      <fieldset class="frm-set">
         <!-- BEGIN switch_icon_checkbox -->
         <dl>
            <dt><label>{POST_ICON_TITLE}</label></dt>
            <dd>
               <!-- BEGIN row -->
               <!-- BEGIN cell -->
               <label style="vertical-align:top">
                  <input type="radio" name="post_icon" value="{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_ID}" id="post_icon_{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_ID}" {switch_topic_modif.switch_icon_checkbox.row.cell.ICON_CHECKED} /> <span onclick="document.forms['post'].post_icon_{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_ID}.checked=true">{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_IMG}</span>
               </label>
               <!-- END cell -->
               <!-- END row -->
            </dd>
         </dl>
         <!-- END switch_icon_checkbox -->
         <dl>
            <dt><label for="modif_topic_title">{L_TOPIC_TITLE_MODIFY}</label></dt>
            <dd>
               <input type="text" name="modif_topic_title" id="modif_topic_title" value="{MODIF_TOPIC_TITLE}" maxlength="{TOPIC_TITLE_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
               <!-- BEGIN switch_topic_button -->
                <input type="button" value="{L_SOLVED_WITHOUT_BRAKETS}" onclick="set_solved(this.form.elements['modif_topic_title'],'{L_SOLVED}')" style="display:none" id="button_solved" />
               <script type="text/JavaScript">
               //<![CDATA[
               document.getElementById('button_solved').style.display = 'inline';
               //]]>
               </script>
               <!-- END switch_topic_button -->
            </dd>
         </dl>
      </fieldset>
      <!-- END switch_topic_modif -->
   </div>

   <!-- BEGIN switch_type_cal -->
   <div class="main-head clearfix">
      <p class="h2">{L_CALENDAR}</p>
   </div>

   <div class="main-content frm">
      <fieldset class="frm-set">
      <dl>
         <dt><label>{L_CALENDAR_TITLE} :</label></dt>
         <dd>
            {S_CALENDAR_DAY} {S_CALENDAR_MONTH} {S_CALENDAR_YEAR} 
            <a href="JavaScript:void(0)" style="font-style:normal;font-weight:normal" onclick="document.post.topic_calendar_day.value={TODAY_DAY};document.post.topic_calendar_month.value={TODAY_MONTH};document.post.topic_calendar_year.value={TODAY_YEAR}">{L_TODAY}</a>
         </dd>
      </dl>
      <dl>
         <dt><label>{L_TIME} :</label></dt>
         <dd>
            <input name="topic_calendar_hour" type="text" maxlength="2" value="{CALENDAR_HOUR}" /> {L_HOURS}  
            <input name="topic_calendar_min" type="text" maxlength="2" value="{CALENDAR_MIN}" /> {L_MINUTES}
         </dd>
      </dl>
      <dl>
         <dt><label>{L_CALENDAR_DURATION} :</label></dt>
         <dd>
            <input name="topic_calendar_duration_day" type="text" maxlength="5" value="{CALENDAR_DURATION_DAY}" /> {L_DAYS}   
            <input name="topic_calendar_duration_hour" type="text" maxlength="5" value="{CALENDAR_DURATION_HOUR}" /> {L_HOURS}  
            <input name="topic_calendar_duration_min" type="text" maxlength="5" value="{CALENDAR_DURATION_MIN}" /> {L_MINUTES}
            <input name="create_event" type="hidden" value="{CREATE_EVENT}" />
            <input name="calendar_d" type="hidden" value="{CALENDAR_D}" />
         </dd>
      </dl>
      </fieldset>
   </div>
   <!-- END switch_type_cal -->
{POLLBOX}
</form>
{TOPIC_REVIEW_BOX}
</div>

<!-- BEGIN switch_privmsg -->
<div id="find_username" class="jqmWindow"></div>

<script src="{JS_DIR}jquery/jqmodal/jqmodal.js" type="text/JavaScript"></script>
<!-- END switch_privmsg -->
<script type="text/JavaScript">
//<![CDATA[
$(function(){
<!-- BEGIN switch_privmsg -->
   privmsg_add_username('{U_SEARCH_USER}', '<br /><input style="margin-top:2px" type="text" name="username[]" />');
<!-- END switch_privmsg -->
<!-- BEGIN switch_image_resize -->
    resize_images({ 'selector' : '.post-entry .entry-content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} });
<!-- END switch_image_resize -->
});
//]]>
</script>

{SCEDITOR}

Amigo vamos simplificar um pouco, tente utilizar este CSS no início da sua folha de estilos.
Caso não funcione me passe o seu CSS completo '-'

Código:

div.posting-block {
    padding: 0px !important;
    margin: 0px !important;
    width: 100% !important;
    display: block !important;
    border: none !important;
}
#smiley-box {
    display: block !important;
    margin: 5px 0px !important;
    width: 100% !important;
    border: none !important;
}

Está quase perfeito, basta abaixar só um pouco mais os emoticons para que ele fique sem ser coberto pela caixa de mensagens. Estou usando este código:

Código:

#textarea_content { 
   width: 100% !important; 
   height: 250px; 
}

Tenho quase certeza que o 'height: 250' está fazendo os emoticons não abaixarem por completo, pois ele deixou a caixa mais cumprida. Então, no seu código é melhor colocar em PIXELS. Mas, não sei onde editar =x
Se quiser, pode fazer o teste no meu painel, devido a você ser staff. Abração e obrigado estar me ajudando =D

Pode fechar o tópico. Fiz apenas assim, acrescentei apenas isto:

Código:

#textarea_content {
width: 100% !important;
}

Dentro do seu código, e deu tudo certo! Erro era o "height: 250px" =D
Obrigadão de verdade pela ajuda amigo =)
Pode dar close.