Плавающий мой div, используя только CSS

Question

Я пытаюсь заставить «ChatBox» плавать в правой части тега <main>, противоположной стороне Box1 и NavBox.

Если я удаляю Box1 или NavBox, тогда он работает. В противном случае я могу получить его только в нижней части страницы (когда «ChatBox» находится после тега <main>) или справа (если перед тегом <main>), но он не будет находиться в верхней части окна <main>, он начнет примерно 200 пикселей вниз.

Единственный HTML, который можно изменить, - это переместить «ChatBox» в тег <main>. В основном это нужно делать только с помощью CSS.

http://jsfiddle.net/8em3m60m/26/

CSS

* { 
    margin:0; 
    padding:0; 
} 
html, body { 
    height:100%; 
} 
body { 
    background:#000; 
    font:normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif; 
    color:#c2c2bd; 
} 
#wrapper { 
    clear:left; 
    max-width:999px; 
    min-height:100%; 
    margin:0 auto; 
    border:0; 
    text-align:left; 
} 
.mainnav, .box-1 { 
    float:left; 
    clear: left; 
    vertical-align:top; 
    width:180px; 
    height:200px; 
    margin: 18px 0 0 8px; 
} 
.chatbox { 
    float:right; 
    vertical-align:top; 
    width:196px; 
    min-height:200px; 
} 
.main { 
    min-height:550px; 
    padding-top: 40px; 
    background: #7d7e7d; 
    margin-top:100px; 
} 
.main-1{ 
    width: 548px; 
    margin-left:194px; 
    min-height:250px; 
    background-color: #3f3f3f; 
    padding:6px; 
} 

HTML

<div id="wrapper"> 
    <div id="box-1" class="nav box-1">Box 1</div> 
    <nav id="navbar" class="nav mainnav">NavBox</nav> 
    <main id="main" class="main" role="main"> 
     <div class="main-1">Main Content</div> 
    </main> 
    <div id="chatbox" class="chatbox">ChatBox</div> 
</div> 

EDIT: Единственное возможное изменение HTML я могу сделать, это переместить Chatbox выше, или ниже, <main> тег ,

Answer 1

Использование абсолютного позиционирования

Если вы хотите сохранить HTML, как вы представили, вы можете использовать абсолютное позиционирование следующим образом.

Вам необходимо нанести position: relative на #wrapper, а затем использовать соответствующие верхние и правые смещения для .chatbox.

Вам необходимо указать ширину или минимальную ширину для обертки, иначе вы получите , частично перекрывающийся с абсолютно позиционируемым элементом.

Это решение может работать, но это зависит от ваших других требований относительно гибкости и отзывчивости.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    background: #000; 
 
    font: normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif; 
 
    color: #c2c2bd; 
 
} 
 
#wrapper { 
 
    clear: left; 
 
    width: 999px; 
 
    min-height: 100%; 
 
    margin: 0 auto; 
 
    border: 0; 
 
    text-align: left; 
 
    position: relative; 
 
} 
 
.mainnav, 
 
.box-1 { 
 
    float: left; 
 
    clear: left; 
 
    vertical-align: top; 
 
    width: 180px; 
 
    height: 200px; 
 
    margin: 18px 0 0 8px; 
 
    outline: 1px dotted yellow; 
 
} 
 
.chatbox { 
 
    vertical-align: top; 
 
    width: 196px; 
 
    min-height: 200px; 
 
    outline: 1px dotted yellow; 
 
    position: absolute; 
 
    right: 8px; 
 
    top: 18px; 
 
} 
 
.main { 
 
    min-height: 550px; 
 
    padding-top: 40px; 
 
    background: #7d7e7d; 
 
    margin-top: 100px; 
 
    outline: 1px dashed yellow; 
 
} 
 
.main-1 { 
 
    width: 548px; 
 
    margin-left: 194px; 
 
    min-height: 250px; 
 
    background-color: #3f3f3f; 
 
    padding: 6px; 
 
}

<div id="wrapper"> 
 
    <div id="box-1" class="nav box-1">Box 1</div> 
 
    <nav id="navbar" class="nav mainnav">NavBox</nav> 
 
    <main id="main" class="main" role="main"> 
 
    <div class="main-1">Main Content</div> 
 
    </main> 
 
    <div id="chatbox" class="chatbox">ChatBox</div> 
 
</div>

Answer 2

Обычно я использовал бы позицию: абсолютный для выравнивания чата справа вверху. Ваш CSS будет;

.chatbox { 
position:absolute; 
top: 0; 
right: 0; 
width:196px; 
min-height:200px; 
} 

Это приведет к выравниванию его в верхнем правом углу родительского элемента чата.

Answer 3

Без реструктуризации вашего HTML (который я настоятельно рекомендую, это немного unsemantic и бессмысленные), вы можете добиться того, что вы ищете таким образом:

JSFiddle Example

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    background:#000; 
 
    font:normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif; 
 
    color:#c2c2bd; 
 
} 
 
#wrapper { 
 
    max-width: 999px; 
 
    min-height: 100%; 
 
    margin: 0 auto; 
 
} 
 
.box-1, .mainnav { 
 
    float: left; 
 
    clear: left; 
 
    width: 180px; 
 
    height:200px; 
 
    vertical-align:top; 
 
    margin: 18px 0 0 8px; 
 
} 
 
.chatbox { 
 
    float:right; 
 
    position: relative; 
 
    top: -200px; 
 
    vertical-align:top; 
 
    width:196px; 
 
    min-height:200px; 
 
} 
 
.main { 
 
    min-height: 550px; 
 
    padding-top: 40px; 
 
    background: #7d7e7d; 
 
    margin-top: 100px; 
 
} 
 
.main-1 { 
 
    width: 548px; 
 
    margin-left: 194px; 
 
    min-height: 250px; 
 
    background: #3f3f3f; 
 
    padding: 6px; 
 
}

<div id="wrapper"> 
 
    <div id="box-1" class="nav box-1">Box 1</div> 
 
    <nav id="navbar" class="nav mainnav">NavBox</nav> 
 
    <div id="chatbox" class="chatbox">ChatBox</div> 
 
    <main id="main" class="main" role="main"> 
 
     <div class="main-1">Main Content</div> 
 
    </main> 
 
</div>

Я переместил ваш .chatbox элемент выше .main и дал ему position: relative; и переместил его 200px выше верхнего положения, где он обычно находится, так что он соответствует Box 1. Лучшим способом сделать это, который не требует свойства position, было бы обернуть .box-1 и .nav в содержащем элементе float содержащий элемент слева, а затем переместите элемент .chatbox над элементом .main и float это право.