Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML textarea positioning with css
    primarykey
    data
    text
    <p>i am currently trying to position a textarea with CSS and to make it look nice. However it's not working.</p> <p>Relevant CSS:</p> <pre><code>#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; } </code></pre> <p>Relevant HTML:</p> <pre><code>&lt;div id="BoardCode"&gt; &lt;button onclick="addBBCode('[FETT]','[/FETT]');"&gt;Fett&lt;/button&gt; &lt;button onclick="addBBCode('[KURSIV]','[/KURSIV]');"&gt;Kursiv&lt;/button&gt; &lt;button onclick="addBBCode('[UNTERSTRICHEN]','[/UNTERSTRICHEN]');"&gt;Unterstrichen&lt;/button&gt; &lt;button onclick="addLink();"&gt;Link&lt;/button&gt; &lt;button onclick="addImage();"&gt;Bild&lt;/button&gt; &lt;/div&gt; &lt;form action="index.php?s=board&amp;action=addedit&amp;where=&lt;?=$Result['Overview']['PostID']?&gt;" method="POST"&gt; &lt;table id="Board"&gt; &lt;tr&gt; &lt;td&gt; &lt;textarea id="BoardInput" name="Text"&gt;&lt;/textarea&gt; &lt;input type="hidden" name="ThreadID" value="&lt;?=$Result['Overview']['ThreadID']?&gt;" /&gt; &lt;/td&gt; &lt;td id="BoardSmiley"&gt; &lt;?php $BoardTemplate-&gt;showSmileys(); ?&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr colspan="2"&gt; &lt;td&gt;&lt;input type="submit" value="OK" /&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; </code></pre> <p>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. </p> <p>What am i doing wrong here?</p> <p>EDIT:</p> <p>jsFiddle: <a href="http://jsfiddle.net/SSxSN" rel="nofollow noreferrer">jsfiddle.net/SSxSN</a> and an image: </p> <p><img src="https://i.stack.imgur.com/CqOEh.png" alt="enter image description here"></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload