CODEWITHSUNDEEP
htmlcsstextarea
Стефан Дончев
Стефан Дончев

Reputation: 305

Force a textarea to be on the same line with other elements

I have a webpage with the following layout:

Text            
Radio Button    
Radio Button    
Button

I want to add a textarea that will be on the same line as the elements, like:

Text            **********
Radio Button    *Textarea*
Radio Button    **********
Button          **********

(the asterixes mark the place occupied by the textarea)

But it ends up being just under the elements:

Text            
Radio Button    
Radio Button    
Button          
**********
*Textarea*
**********
**********

What CSS styling should I apply to resolve this problem?

Upvotes: 5

Views: 6267

Answers (4)

Prakash GPz
Prakash GPz

Reputation: 1523

there are different methods:

1) using table

<table>
  <tr>
    <td> Text Goes here... </td>
    <td> Textarea goes here </td>
  </tr>
</table>

2) Floating the element to left direction

<div style="float:left"> Text goes here </div>
<textarea style="float:left"></textarea>
<div style="clear:both"></div>

3) Setting Inline-Block property

<div style="display: inline-block; "> Text goes here.. </div>
<textarea></textarea>

Note: Set same height for both text area and text content div

Upvotes: -1

Romain
Romain

Reputation: 1948

you need to float your content or use the inline-block option

Here is an exemple of what you want:http://jsfiddle.net/uDLZF/3/

CSS

#first, #second{
    float:left;
}
ul { list-style-type: none; }

HTML

  <div>
        <ul id="first">
            <li>Text </li>     
            <li>Radio Button  </li> 
            <li>Radio Button  </li> 
            <li>Button </li>         
        </ul>
        <ul id="second">
            <li>**********</li>   
            <li>*Textarea*</li> 
            <li>**********</li> 
            <li>**********</li>         
        </ul> 
    </div>

Upvotes: 3

CM Kanode
CM Kanode

Reputation: 1436

I'd suggest encapsulating your origin form elements in a div tag, so that they would be grouped together. Then apply a float to that div and to your textarea.

<div style="float: left;">
    Text
    ...
    Button
<div>
<textarea style="float: left;"></textarea>
<div style="clear: both;"></div>

Use an element with clear:both to prevent the rest of the page's content (if any) from wrapping around your form elements.

Upvotes: 0

Simon
Simon

Reputation: 2830

you will need to float the textarea left or right depending on whichever works for you. Beware though, if you float the textarea right you will need to put the markup above the other elements.

Upvotes: 0

Related Questions