Как сделать размер textarea резиновым?

width:100%; )))

---------- Добавлено 06.04.2017 в 21:44 ----------

для это окружающие элементы тоже должны быть в процентах

ну или реально адаптив

---------- Добавлено 06.04.2017 в 21:45 ----------

а высоту лучше в строках row="10" например

---------- Добавлено 06.04.2017 в 21:45 ----------

а высоту лучше в строках row="10" например

Я пробовал width: 100%, но тогда на компе текстареа слишком узкая, а мне нужна пошире (поэтому ставлю как 450px)

alexdosson, узкая - это значит у вас родитель узкий, а своими 450 вы раздвигаете а того хуже портите родителя

кидайте побольше кусок кода, может тогда и поможем

---------- Добавлено 06.04.2017 в 22:13 ----------

т.е. например

<div style="width:50px;">

<textarea style="width:100%; height:150px;"></textarea>  

</div>

При таком раскладе ваш textarea будет width:50px;

<div style="width:50px;">

<textarea style="width:100%; height:150px;"></textarea>  

</div>

Вот код

	<div style="background:#e8e8e8; height:auto; width:85%; margin:auto;">

		<div style="width:80%; margin:auto; padding-top:30px; padding-bottom:30px;">

			<div style="float:left; width:30%">

				<p>Text number 1</p>

				<p>Text number 2</p>

				

			</div>

			

			<div style="float:left;">

				 <form action="handler.php">

					  <div style="float:left;">

						  Name<br/>

						  <p><input type="text" name="fullname" ></p>

						  Phone<br/>

						  <p><input type="text" name="phone" ></p>

						  <p><input type="submit" value="Send"></p>

					</div>

					

					<div style="float:right">

						<p>Message</p>

						<textarea style="width:450px; height:150px;"></textarea>

					</div>

				</form>

			</div>

			<div style="clear:both;"></div>

		</div>

	</div>

вот эта штуковина пытается сжать див помаксимуму

вот у тебя 2 дива

<div style="float:left;">

и

<div style="float:right">

дай им явно ширину например по 50%

тогда будет норм, а чтобы на телефоне гуд было то на пример @media (max-width: 425px)

<style type="text/css">
	.main_div {background:#e8e8e8; height:auto; width:85%; margin:auto; padding-top:30px; }
	.left_div {float: left; width: 50%}
	.right_div {float: right; width: 50%}
	/* адаптив для телефона*/
	@media (max-width: 425px) {
		.left_div, .right_div, .main_div {width: 100%}
	}
</style>
<div class="main_div"> 
			<div style="float:left; width:30%"> 
				<p>Text number 1</p> 
				<p>Text number 2</p> 
				 
			</div> 
			 
			<div style="float:left; width:70%"> 
				 <form action="handler.php"> 
					  <div class="left_div"> 
						  Name<br/> 
						  <p><input type="text" name="fullname" ></p> 
						  Phone<br/> 
						  <p><input type="text" name="phone" ></p> 
						  <p><input type="submit" value="Send"></p> 
					</div> 
					 
					<div class="right_div"> 
						<p>Message</p> 
						<textarea style="width:100%; height:150px;"></textarea> 
					</div> 
				</form> 
			</div> 
			<div style="clear:both;"></div> 
</div>  

и еще там выше я поставил ширину 70%

---------- Добавлено 06.04.2017 в 22:29 ----------

вообще для адаптива, тем более для начального понимания сразу бы узнал про бутстрап

---------- Добавлено 06.04.2017 в 22:35 ----------

вообще в данном случае никчему

---------- Добавлено 06.04.2017 в 22:36 ----------

тоже не надо

---------- Добавлено 06.04.2017 в 22:38 ----------

лучше вообще заюзай margin-top:30px; - красивее будет

<style type="text/css">

	.main_div {background:#e8e8e8; height:auto; width:85%; margin:auto; padding-top:30px; }

	.left_div {float: left; width: 50%}

	.right_div {float: right; width: 50%}

	/* адаптив для телефона*/

	@media (max-width: 425px) {

		.left_div, .right_div, .main_div {width: 100%}

	}

</style>

<div class="main_div"> 

			<div style="float:left; width:30%"> 

				<p>Text number 1</p> 

				<p>Text number 2</p> 

				 

			</div> 

			 

			<div style="float:left; width:70%"> 

				 <form action="handler.php"> 

					  <div class="left_div"> 

						  Name<br/> 

						  <p><input type="text" name="fullname" ></p> 

						  Phone<br/> 

						  <p><input type="text" name="phone" ></p> 

						  <p><input type="submit" value="Send"></p> 

					</div> 

					 

					<div class="right_div"> 

						<p>Message</p> 

						<textarea style="width:100%; height:150px;"></textarea> 

					</div> 

				</form> 

			</div> 

			<div style="clear:both;"></div> 

</div>  

Вроде уже лучш, только текстареа уехала вправо.

Ее можно как-то прижать к инпутам и чтобы была на одном уровне с первым инпутом, а заканчивалась на одном уровне со вторым? Что-то верстка это жесть какая-то :)

Для отладки временно раскрасьте объемлющие дивы (bgcolor ... background-color) и пр. блоки... чтобы понимать что на что влияет.

alexdosson, не знаю в чем вы работаете но например есть инструмент для хрома

по ссылочке картинка https://yadi.sk/i/0MhilYzf3GkR6Q

сможете все отладить и даже посмотреть как на разных устройствах будет выглядеть

и всетаки ссылка на бутстрап по русски

http://bootstrap-3.ru/css.php

суть у него оч простая

1 делать верстку более стандартизированную(размечены размеры блоков для разных экранов)

2 есть основной container - определяет ширину сайта

3 есть строчный див row

4 и есть дивы для 12 столбцов имеющие разный размер в процентах для разных экранов

5 есть уже несколько компонентов: такие как ярлычки, кнопочки с анимацией, навигация и готовые скрипты JS

---------- Добавлено 07.04.2017 в 16:02 ----------

Ну уж сгорел сарай - гори и хата)))

вот твой пример на бутстрап

<!DOCTYPE html>

<html>

<head>

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<title>Адаптивная форма</title>

	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

	<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

</head>

<body>



<style type="text/css">

	.main_div {background:#e8e8e8; padding:30px 15px; }

</style>



<div class="container main_div"> 

	<div class="row">

		<div class="col-md-2">

			<ul class="nav nav-pills nav-stacked">

				<li class="active"><a href="#">Главная</a></li>

  				<li><a href="#">Статистика</a></li>

			</ul>

		</div>

		<form class="form" enctype="multipart/form-data" method="post" action="">

			

		<div class="col-md-5">

			<div class="form-group">

				<label class="control-label" for="name_i">Name</label>

				<input name="name_i" type="text" id="name_i" class="name_i form-control " value="">

			</div>

			<div class="form-group">

				<label class="control-label" for="phone_i">Phone</label>

				<input name="phone_i" type="text" id="phone_i" class="phone_i form-control " value="">

			</div>

		</div>

		<div class="col-md-5">

			<div class="form-group">

				<label class="control-label" for="message_i">Message</label>

				<textarea name="message_i" id="message_i" class="message_i form-control " rows="5" cols=""></textarea>

			</div>

		</div>

		<div class="form-group col-md-5 col-md-offset-2">

			<button type="submit" class="btn btn-success col-md-6 col-xs-6">Send</button> 

		</div>

		</form>

	</div>

</div>  

<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

</body>

</html>

nezabor:
alexdosson, не знаю в чем вы работаете но например есть инструмент для хрома
по ссылочке картинка https://yadi.sk/i/0MhilYzf3GkR6Q
сможете все отладить и даже посмотреть как на разных устройствах будет выглядеть

и всетаки ссылка на бутстрап по русски
http://bootstrap-3.ru/css.php
суть у него оч простая
1 делать верстку более стандартизированную(размечены размеры блоков для разных экранов)
2 есть основной container - определяет ширину сайта
3 есть строчный див row
4 и есть дивы для 12 столбцов имеющие разный размер в процентах для разных экранов
5 есть уже несколько компонентов: такие как ярлычки, кнопочки с анимацией, навигация и готовые скрипты JS

---------- Добавлено 07.04.2017 в 16:02 ----------

Ну уж сгорел сарай - гори и хата)))

вот твой пример на бутстрап

<!DOCTYPE html>

<html>

<head>

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<title>Адаптивная форма</title>

	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

	<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

</head>

<body>



<style type="text/css">

	.main_div {background:#e8e8e8; padding:30px 15px; }

</style>



<div class="container main_div"> 

	<div class="row">

		<div class="col-md-2">

			<ul class="nav nav-pills nav-stacked">

				<li class="active"><a href="#">Главная</a></li>

  				<li><a href="#">Статистика</a></li>

			</ul>

		</div>

		<form class="form" enctype="multipart/form-data" method="post" action="">

			

		<div class="col-md-5">

			<div class="form-group">

				<label class="control-label" for="name_i">Name</label>

				<input name="name_i" type="text" id="name_i" class="name_i form-control " value="">

			</div>

			<div class="form-group">

				<label class="control-label" for="phone_i">Phone</label>

				<input name="phone_i" type="text" id="phone_i" class="phone_i form-control " value="">

			</div>

		</div>

		<div class="col-md-5">

			<div class="form-group">

				<label class="control-label" for="message_i">Message</label>

				<textarea name="message_i" id="message_i" class="message_i form-control " rows="5" cols=""></textarea>

			</div>

		</div>

		<div class="form-group col-md-5 col-md-offset-2">

			<button type="submit" class="btn btn-success col-md-6 col-xs-6">Send</button> 

		</div>

		</form>

	</div>

</div>  

<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

</body>

</html>

Благодарю, попробую