HTML textarea positioning css

Question

В настоящее время я пытаюсь разместить текстовое поле с CSS и сделать его красивым. Однако он не работает.

Соответствующий CSS:

#BoardInput { 
padding:0px; 
width:100%; 
height:100%; 
} 
#BoardSmiley { 
min-width:100px; 
width:20%; 
padding:10px; 
border-right:thin solid #4E6011; 
border-bottom:thin solid #4E6011; 
background-color:#C6E466; 
} 
#BoardCode { 
border:thin solid #4E6011; 
background-color:#C6E466; 
padding:3px; 
} 

Соответствующие HTML:

<div id="BoardCode"> 
    <button onclick="addBBCode('[FETT]','[/FETT]');">Fett</button> 
    <button onclick="addBBCode('[KURSIV]','[/KURSIV]');">Kursiv</button> 
    <button onclick="addBBCode('[UNTERSTRICHEN]','[/UNTERSTRICHEN]');">Unterstrichen</button> 
    <button onclick="addLink();">Link</button> 
    <button onclick="addImage();">Bild</button> 
</div> 
<form action="index.php?s=board&action=addedit&where=<?=$Result['Overview']['PostID']?>" method="POST"> 
<table id="Board"> 
    <tr> 
     <td> 
       <textarea id="BoardInput" name="Text"></textarea> 
      <input type="hidden" name="ThreadID" value="<?=$Result['Overview']['ThreadID']?>" /> 
     </td> 
     <td id="BoardSmiley"> 
     <?php 
     $BoardTemplate->showSmileys(); 
     ?> 
     </td> 
    </tr> 
    <tr colspan="2"> 
     <td><input type="submit" value="OK" /> 
    </tr> 
</table> 
</form> 

Проблема заключается в том, что я хочу "Кодекс" Box в верхней части, Улыбки-Box справа и текстовое поле в левый. И я хочу, чтобы они были полностью приспособлены друг к другу. Однако текстовое поле на 1px больше намерено направо, чем поле Кода выше, и 2px больше намерены к вершине, чем Смайлики-Коробка справа.

Что я здесь делаю неправильно?

EDIT:

jsFiddle: jsfiddle.net/SSxSN и изображение:

Answer 1

Добавить отрицательные поля для левой и нижней части, как это:

#BoardInput { 
    padding:0px; 
    width:100%; 
    height:100%; 
    margin: 0 0 -8px -1px; 
} 

http://jsfiddle.net/SSxSN/1/