В чем ошибка? Или почему при выходе текста за пределы элемент смещается?

Question

[Алексей]

<form>
	
		<div id="textUser">
			<fieldset>
				<p><img src="img/user.png"></p>
			</fieldset>

			<fieldset class="dataUser">
				<p class="date">Дата</p>
				<p class="name">Имя</p>
				<p class="text">Может хватит переназначать из ведомства в ведомство? Кто должен решить этот вопрос уже и когда? Может хватит переназначать?</p>
			</fieldset>
		</div>

		<div id="yetComment">
			
		</div>

		<div id="form">
			<fieldset>
				<p>
					<img src="img/user.png">
				</p>
			</fieldset>

			<fieldset>
				<p>
					<textarea name="message" id="message" cols="30" rows="10"></textarea>	
				</p>
				<p><a href="">Отправить</a></p>
			</fieldset>
		</div>
		
	</form>

form {
			width: 447px;
			margin: 0 auto;
			box-shadow: 0px 1px 2px;
		}
		#textUser {
			border: 1px solid #d3d3d3;
			background: none repeat scroll 0 0 #fff;
			width: 447px;

			box-shadow: 0 0 5px #ccc 1px 1px 0 #fff inset, -1px -1px 0 #fff inset, 0 0 15px #ddd inset;
			margin: 0 auto;
			overflow: hidden;
			padding-left: 10px;
			text-align: left;
			background: #FAFAFA;
			word-wrap:break-word;
		}

		#textUser fieldset {
			margin: 0;
			padding: 5px;
			border: none;
			float: left;
			display: inline;
			word-wrap:break-word;
		}

		#textUser fieldset p{
			margin: 0;
			padding: 5px;
			word-wrap:break-word;
		}

		#textUser p.date {
			color: #A8A8A8
		}

		#textUser p.name {
			color: #01579b;
		}

		#textUser p.text {
			color: #212121;
		}

		#form {
			border: 1px solid #d3d3d3;
			background: none repeat scroll 0 0 #fff;
			width: 447px;

			box-shadow: 0 0 5px #ccc 1px 1px 0 #fff inset, -1px -1px 0 #fff inset, 0 0 15px #ddd inset;
			margin: 0 auto;
			overflow: hidden;
			padding-left: 10px;
			text-align: left;
			background: #ebebeb;
		}

		#form fieldset {
			margin: 0;
			padding: 5px;
			border: none;
			float: left;
			display: inline;
		}

		#form textarea {
			font: 13px Trebuchet MS, Arial, Helvetica, Sans-Serif;
			color: #6b6b6b;
			padding-right: 0;
			margin: 0;
			border: none;
			border-radius: .3em;
			box-shadow: inset 0 0 5px rgba(0, 0, 0, .1), inset 0 1px 2px rgba(0,0,0,0.3);
			color: #5b5b5b;
			width: 350px;
			height: 87px;
			overflow: auto;
			resize: none;
			position: relative;
			left: 10px;
		}

		#form textarea:focus {
			box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.4);
			font-weight: 400;
			color: #212121;
		}

		#form fieldset a {
			display: inline-block;
			text-decoration: none;
			border-radius: 3px;
			padding: 5px;
			color: #fff;
			background: #03A9F4;
			margin-left: 10px;
		}

Так в тэге c классом text выходит за пределы, элемент смещается, я не могу понять почему?

Comments

[Алексей]

Вот так должно выглядеть
но если текст выходит за рамки "Имя", "Дата" и сам текст смещаются под картинку

[tuxx]

А где код для класса dataUser?

Answer 1

[Murat Atila]

Что у вас смещается? jsfiddle.net/oxeudj1b

Answer 2

[Alexander Sydorenko]

Смотрите, я для Вас сохранил Ваш пример jsfiddle.net/a5r08x8k , теперь можете заскриншотить и показать что где за пределами, и как должно быть?

И да.. fieldsets Вы столько зачем напихали? div-ы кончились?

Comments

[Алексей]

как то так...

[Alexander Sydorenko]

alexsemen94: А, ок.. уже понятнее. Тогда с минимальными изменениями будет так jsfiddle.net/a5r08x8k/1 то что вы хотите.. Но на самом деле там надо все переверстать.

[Alexander Sydorenko]

alexsemen94: изменилось только то что для

#textUser .dataUser {
    width:300px;
}

и да.. не пишите css правил для ид елемента..

[Алексей]

а можете посоветовать что нужно изменить, пару словами?

[Alexander Sydorenko]

alexsemen94:
1. Убрать лишние теги из разметки. (всякие fieldset, p). Оставив только тот минимум который _необходим_ для создания этой разметки. Суть - если Вы можете стилизовать какой то элемент использовав одно правило (один контейнер), то не зачем его помещать в дополнительные сущности.
2. Уменьшить форму до размера формы - фактически textarea и кнопка отправить, остальное сверстать в диве.
3. Почитать как сделать две колонки в блоке, например тут stackoverflow.com/questions/5645986/two-column-div... одна фиксированная (фото) вторая сколько получится, сделать красиво. Это для вашей верхней части, там где часть фото, левая часть текст, возможно большой.
4. Не использовать id элементов для стилизации (для css), так как такие правила очень трудно переназначить.
5. Стараться использовать inline элементы (span по умолчанию) там где надо inline, и блочные block (div по умолчанию)

Ну и учится, читать, искать красивые и элегантные решения, запоминать и использовать.

Answer 3

[blolg]

Нужно для .dataUser задать фиксированную ширину.
И для блока с картинкой тоже.
Эти два блока не помещаются по ширине, а т.к. у них задано свойство float: left, то блок с текстом смещается ниже.