Почему, если вложить в один блок несколько других с флоатом, то они выезжают за пределы родительского блока, пока не назначить ему overflow: hidden ?
Вот пример:
<!doctype html>
<head>
<style>
#allinn {
width: 1000px;
margin: auto;
}
.questions {
background-color: silver;
overflow: hidden;
}
.answers {
background-color: red;
}
.questionblock > input{
display:block;
}
.answerblock > input{
display:block;
}
.questionblock {
float: left;
}
.answerblock {
float: left;
}
</style>
</head>
<body>
<div id="allinn">
<div class='episod'>
<div class="questions">
<h3> Блок </h3>
<h4> Вопросы </h4>
<div class="questionblock">
<textarea cols="45" rows="4" ></textarea>
<input type="button" value="Del" onclick="delthis(this)" />
</div>
<div class="questionblock">
<textarea cols="45" rows="4" ></textarea>
<input type="button" value="Del" onclick="delthis(this)" />
</div>
<div class="questionblock">
<textarea cols="45" rows="4" ></textarea>
<input type="button" value="Del" onclick="delthis(this)" />
</div>
<input type="button" value="add q" onclick="addblock(this, 'question')"/>
<input type="button" value="InnerHTML" onclick="alert(document.body.innerHTML)"/>
</div>
<div class = 'answers'>
<h4>Ответы</h4>
<div class="answerblock">
<textarea cols="45" rows="3" ></textarea>
<input type="button" value="Del" onclick="delthis(this)" />
</div>
<div class="answerblock">
<textarea cols="45" rows="3" ></textarea>
<input type="button" value="Del" onclick="delthis(this)" />
</div>
<div class="answerblock">
<textarea cols="45" rows="3" ></textarea>
<input type="button" value="Del" onclick="delthis(this)" />
</div>
<input type="button" value="add a" onclick="addblock(this, 'answer')"/>
</div>
</div>
<input type="button" value="add e" onclick="addepisod(this)"/>
</div>
</body>