Что я пытаюсь сделать:
Вертикально центрируйте форму в левом div. Высота этого div должна зависеть от высоты правого div, которая может изменяться в зависимости от содержащегося в нем текста.
Что я хочу:
Современное решение, которое не использует JavaScript. Существует множество подходов без JavaScript, но как только вы учитываете плавающие div и динамические высоты, этот список резко сокращается. Я еще не нашел работающего решения, пока только одно современное.
Вот jsfiddle (но я предлагаю использовать необработанный код):
pshpV
Вот необработанный код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body
{
margin: 10px;
padding: 10px;
background: #293134;
color: #E0E2E4;
border: 1px solid #93C763;
}
#container
{
overflow: hidden;
width: 800px;
margin: 0 auto;
padding: 10px;
border: 1px solid #678CB1;
}
#left
{
float: left;
width: 568px;
padding: 10px;
border: 1px solid #FFCD22;
}
#right
{
float: left;
width: 200px;
margin-left: 10px;
padding: 10px;
border: 1px solid #EC7600;
}
#container, #left, #right
{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<form>
<input type="text" name="keyword" required placeholder="keyword" />
<input type="submit" value="search" />
</form>
</div>
<div id="right">
<h1>foo</h1>
<h2>bar</h2>
<h3>baz</h3>
</div>
</div>
</body>
</html>
Hindsights:
Насколько я знаю, единственный подход к работе с таблицами - это удаление поплавков. Похоже, мне даже не нужны поплавки. Несмотря на это, я все еще хотел бы найти ответ на мой вопрос.