Я работаю над сценарием пользовательского стиля Youtube , который отображает комментарии рядом с видео, чтобы вы могли смотреть видео и читать комментарии одновременно (что за чудесная идея - дух). Вы можете увидеть на скриншотах, как далеко я дошел. Это означает, что я забочусь только о Firefox, и что CSS3 идет.
Проблема, с которой я столкнулся, заключается в том, что я хочу сделать полностью изменяемый макет, и чтобы div "other videos" плавал вправо, а средний div (комментарии) растягивается, чтобы заполнить оставшееся пространство между левым div ( видео) и правильный div («другие видео»).
В переводе на CSS проблема заключается в следующем: если в этом фиксированном порядке в документе заданы элементы div "main", "rightnav" и "footer", то как сделать так, чтобы div-файл rightnav плавал вправо, а нижний колонтитул НИЖЕ ? Лучшее, что мне удалось сделать, - это абсолютно правильно расположить «rightnav» (справа: 0), но тогда нижний колонтитул опустится ниже «основного» div, а не ниже их обоих. Я посмотрел на Используйте CSS, чтобы изменить порядок DIV уже. Отрицательные значения «top» отсутствуют, поскольку они зависят от содержимого «main» div.
Вот исходный код:
<html lang="en-US">
<head>
<style type="text/css">
#main {
border: 1px solid;
float: left;
margin-right: 410px;
}
#rightnav {
background-color: yellow;
opacity: 0.5;
border: 1px dotted;
width: 400px;
float: right;
position: absolute;
right: 0;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="baseDiv" style="width: 100%">
<div id="main">
<script>for (var i=1; i<100; i++) document.write('main ');</script>
</div>
<div id="rightnav">
<script>for (var i=1; i<200; i++) document.write('rightnav ');</script>
</div>
<div id="footer">
<script>for (var i=1; i<100; i++) document.write('footer ');</script>
</div>
</div>
</body>
</html>
Надеюсь, понятно, чего я хочу достичь: «нижний колонтитул» ниже двух элементов div и «основной» элемент div.
Спасибо за любые идеи.