Align form in a single row with text area and remove resizing feature?

Question

Possible Duplicate:
Multiple select options in one row

I have the following code but it generates it on separate lines, and I want it to be on a single line (only filling the parent which is not shown).

Also, how can I remove the text area's re-size feature?

<div id="search" align="left" style="width:100% height="100%">
<select>
    <option>Beers</option>
    <option>Cigars</option>
    <option>Wines</option>
</select>
    <div align="right">
        <form>
            <textarea style=width:"100%" height="100%" cols="0" "rows="0"></textarea>
        </form>
    </div>
</div>

To disable textarea resize: `textarea { resize: none; }` – Caelea Oct 19 '12 at 15:34 — Caelea, Oct 19 '12 at 15:34
There are a lot of inline errors in your code. – Bram Vanroy Oct 19 '12 at 15:39 — Bram Vanroy, Oct 19 '12 at 15:39
Careful with your inline styling – Oliver Tappin Oct 19 '12 at 15:58 — Oliver Tappin, Oct 19 '12 at 15:58

JamieM23 · Accepted Answer · 2012-10-19T15:43:56.877

here you go: http://jsfiddle.net/XeVdN/2 or see below:

<div id="search" style="float:left; width:100%; height=100%;">
<select stryle="float:left;">
    <option>Beers</option>
    <option>Cigars</option>
    <option>Wines</option>
</select>
    <div style="float:right;">
        <form>
            <textarea style="width:100%; height=100%; resize:none;" cols="0" "rows="0"></textarea>
        </form>
    </div>
</div>

You had some issues with your styles (a few rogue " symbols) which I have cleaned up and also to get them to align, you just need to float the first element left and the second right.

For learning purposes, whenever you use the style attribute, you dont need to wrap each individual parameter in quotation marks, just the overall statement and follow every style with a ; as in the example code above.

Oliver Tappin · Answer 2 · 2012-10-19T15:38:19.930

You want to use float. Remove the align attribute and use style="float:left; and style="float:right; for the other one.

Your current style attribute is also incorrect, please see the example below:

HTML:

<div id="search">
  <select>
    <option>Beers</option>
    <option>Cigars</option>
    <option>Wines</option>
  </select>
  <div id="other">
   <form>
     <textarea></textarea>
   </form>
  </div>
</div>

CSS:

#search {
    width:50%;
    float:left;
}
#other {
    width:50%;
    float:right;
}
/*** This is what removes the textarea resize ***/
textarea {
    resize:none;
}

Working example here: http://jsfiddle.net/gN6Fz/

Align form in a single row with text area and remove resizing feature?

2 Answers2