Я пытаюсь что-то здесь с плавающей коробки в контейнере. Проблема, с которой я столкнулся, заключается в том, что если содержимое становится слишком большим в одном из контейнеров, то субконтейнер под ним не позиционируется прямо под ним, вместо этого он плавает слева от края верхнего контейнера. Надеюсь, у меня есть смысл. Я размещаю код ниже, это может дать вам лучшую идею. И я также прилагаю изображение для того, чего я пытаюсь достичь. Если вопрос не ясен, пожалуйста, дайте мне знать.
Спасибо
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>containers</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#container{width:700px;margin-left:auto;margin-right:auto;overflow:hidden;background:red;}
.subContainer{width:340px;background:blue;float:left;}
.subContainer:nth-child(even){background:green;float:right;}
</style>
</head>
<body>
<div id="container">
<div class="subContainer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non lorem sem, et scelerisque augue.
Integer ut tortor libero, vel aliquam sapien. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Phasellus id aliquet sapien. Cras sit amet diam sed massa bibendum fringilla.
Donec aliquet posuere urna. Vestibulum condimentum velit orci, ut iaculis tellus. Fusce sit amet ante felis. Nunc
quam felis, venenatis sed tincidunt quis, auctor a orci. Aliquam mauris leo, lacinia eu placerat vitae, placerat
sit amet sapien. Etiam eget dolor at neque dapibus pretium auctor non dui. Aliquam erat volutpat. Vestibulum rhoncus
urna id enim volutpat vehicula. Proin ut massa diam, quis condimentum sem. Nullam ac scelerisque neque. Donec tristique
tristique elit, nec vulputate turpis suscipit quis. Nam nisl purus, blandit non hendrerit eu, vestibulum vel justo.
Curabitur et massa sapien.Praesent laoreet, risus eu facilisis sodales, urna lectus condimentum felis, laoreet ullamcorper
sapien urna in lorem. Nulla ut sem sapien, ut aliquet augue. Curabitur nec lorem risus, in interdum augue. Sed aliquam sapien
in sapien viverra iaculis mattis eros pulvinar. In hac habitasse platea dictumst. Suspendisse viverra purus vitae nibh lacinia
at blandit arcu auctor. Mauris sapien lacus, euismod eget malesuada condimentum, bibendum a quam. Phasellus faucibus, orci in
ultricies mollis, orci tortor sagittis eros, non iaculis lorem orci nec quam. Donec luctus bibendum risus et gravida. Sed at
tortor vel metus elementum euismod.
</p>
</div>
<div class="subContainer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non lorem sem, et scelerisque augue.
Integer ut tortor libero, vel aliquam sapien. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Phasellus id aliquet sapien. Cras sit amet diam sed massa bibendum
fringilla. Donec aliquet posuere urna. Vestibulum condimentum velit orci, ut iaculis tellus. Fusce sit amet
ante felis. Nunc quam felis, venenatis sed tincidunt quis, auctor a orci. Aliquam mauris leo, lacinia eu
placerat vitae, placerat sit amet sapien. Etiam eget dolor at neque dapibus pretium auctor non dui. Aliquam
erat volutpat. Vestibulum rhoncus urna id enim volutpat vehicula. Proin ut massa diam, quis condimentum sem.
Nullam ac scelerisque neque. Donec tristique tristique elit, nec vulputate turpis suscipit quis. Nam nisl purus,
blandit non hendrerit eu, vestibulum vel justo. Curabitur et massa sapien.
</p>
</div>
<div class="subContainer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non lorem sem, et scelerisque augue.
Integer ut tortor libero, vel aliquam sapien. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Phasellus id aliquet sapien. Cras sit amet diam sed massa bibendum fringilla.
Donec aliquet posuere urna. Vestibulum condimentum velit orci, ut iaculis tellus. Fusce sit amet ante felis. Nunc
quam felis, venenatis sed tincidunt quis, auctor a orci. Aliquam mauris leo, lacinia eu placerat vitae, placerat
sit amet sapien. Etiam eget dolor at neque dapibus pretium auctor non dui. Aliquam erat volutpat. Vestibulum rhoncus
urna id enim volutpat vehicula. Proin ut massa diam, quis condimentum sem. Nullam ac scelerisque neque. Donec tristique
tristique elit, nec vulputate turpis suscipit quis. Nam nisl purus, blandit non hendrerit eu, vestibulum vel justo.
Curabitur et massa sapien.Praesent laoreet, risus eu facilisis sodales, urna lectus condimentum felis, laoreet ullamcorper
sapien urna in lorem. Nulla ut sem sapien, ut aliquet augue. Curabitur nec lorem risus, in interdum augue. Sed aliquam sapien
in sapien viverra iaculis mattis eros pulvinar. In hac habitasse platea dictumst. Suspendisse viverra purus vitae nibh lacinia
at blandit arcu auctor. Mauris sapien lacus, euismod eget malesuada condimentum, bibendum a quam. Phasellus faucibus, orci in
ultricies mollis, orci tortor sagittis eros, non iaculis lorem orci nec quam. Donec luctus bibendum risus et gravida. Sed at
tortor vel metus elementum euismod.
</p>
</div>
</div>
</body>
</html>
