Атрибут Float CSS заставляет родителей не наследовать высоту? ⇐ CSS

[Anonymous]

У меня есть элемент в Div, установленном на плавание: right Однако он заставляет наиболее внешний див не обертываться. Это JSfiddle для этого. < /P>


body {
font-family: segoeui, Helvetica, arial;
background: url('../images/green11.jpg') no-repeat center;
/*#11345d*/
color: #fff;
}

.display {
/* border: 3px solid #fff; */
background: #000;
padding-bottom: 15px;
padding-top: 15px;
opacity: .8;

width: 640px;
margin-left: auto;
margin-right: auto;
}

.centredContent {
margin-left: auto;
margin-right: auto;
width: 540px;
}

.centredText {
text-align: center;
}

.right {
text-align: right;

}

.text {
width: 300px;
font-size: 20px;
}

.element * {
padding: 15px;
margin-bottom: 20px;

}

.element label {
float: left;
width: 156px;
font-weight: 700;
}

.element input.text {
float: left;
width: 300px;
padding-left: 20px;
}

h1.centredContent {
margin-bottom: 30px;
}

.element #submit {
/* When set to float right it breaks and the form doesnt inherit its height... */
/* float: right; */
}< /code>

Form Practice




Line 1:


Line 2:


Line 3:






< /code>
< /div>
< /div>
< /p>
Я пытаюсь заставить кнопку отправки, чтобы плавать прямо в Div Но установка этого атрибута, кажется, заставляет его сломать. Как я могу получить родительский элемент, чтобы обернуть плавающий элемент?


Подробнее здесь: https://stackoverflow.com/questions/799 ... rit-height