HTML textarea positioning with css - html

Question

i am currently trying to position a textarea with CSS and to make it look nice. However it's not working.
Relevant 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;
}
Relevant 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>
The problem is that i want the "Code" Box at the top, the Smileys-Box at the right and the textarea at the left. And i want them to be fully adjusted to each other. However the textarea is 1px more intented to the right than the Code box above and 2px more intented to the top than the Smileys-Box on the right.
What am i doing wrong here?
EDIT:
jsFiddle: jsfiddle.net/SSxSN and an image:

Answer 1

Use:
resize:none;
in your css code in textarea.

Answer 2

Add negative margins for left and bottom, like this:
#BoardInput {
padding:0px;
width:100%;
height:100%;
margin: 0 0 -8px -1px;
}
http://jsfiddle.net/SSxSN/1/