Плавающий другой div рядом с главным центрированным div

Question

Итак, у меня есть сайт, и вся вещь завернута в контейнер. В этом контейнере находится маржа: авто. Я хотел бы поместить кусок контента справа от этого центрированного контейнера и иметь его вид сбоку от него независимо от того, изменяет ли пользователь окно браузера и т. Д. Мне интересно, есть ли простой простой способ сделайте это, а не добавьте еще один огромный div, придав ему ширину и поместите центрированную часть влево, а часть содержимого - вправо. Благодаря!

Answer 1

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

Совет: убедитесь, что ваш контейнер достаточно широкий, чтобы держать оба внутренних div; если нет, и пользователь имеет более узкое окно, они будут показывать один ниже другого.

Answer 2

Дайте контейнеру div положение свойства: относительное; разместить плавучий DIV в качестве первого дочернего контейнера DIV и дать ему

#floatingDiv 
{ 
    position: absolute; 
    top: 0; 
    right: -{widthOfFloatedDiv}; 
} 

Я думаю, что будет работать, но непроверенных

Хорошо так протестировали его, и он работает

<div style="position: relative; width: 980px; margin: 0 auto; border: 1px solid #000; height: 400px;"> 
    <div style="position: absolute; top: 0; right: -200px; width: 200px;"> 
     <p>Floated DIV</p> 
    </div> 
    <p>container div</p> 
</div> 

Answer 3

Спекуляция на @NickAllen, вы хотите использовать абсолютное позиционирование, чтобы ширина боковой панели не включалась в центрирование основного контейнера.

#container { 
 
    position: relative; 
 
    width: 500px; 
 
    border: 1px solid #f00; 
 
    margin: 0px auto; 
 
} 
 
#sidebar { 
 
    position: absolute; 
 
    width: 200px; 
 
    right: -200px; 
 
    border: 1px solid #0f0; 
 
}

<div id="container"> 
 
    <div id="sidebar"> 
 
    [ sidebar content ]<br> 
 
    [ sidebar content ]<br> 
 
    </div> 
 
    [content]<br> 
 
    [content]<br> 
 
    [content]<br> 
 
</div>

Answer 4

Может быть, я недоразумение ваш вопрос, но это не то, что вы хотите:

#container { 
 
     width: 960px; 
 
     margin: 0px auto; 
 
    } 
 
    
 
    #sidebar { 
 
     float: right; 
 
    }

<div id="container"> 
 
     <div id="sidebar"> 
 
     some content 
 
     </div> 
 
    </div>

Answer 5

Старый вопрос, но вклад, так как другие ответы были лишены этого «чего-то», и он все еще находится на вершине Google. Самый простой, самый чистый способ добиться этого - две обертки.

<div class="bigWrapper"> 
    <div class="sidebar">Hello, I'm your sidebar</div>  

    <div class="smallWrapper"> 
    Put the thing you want to center here. 
    </div> 
</div> 

Со следующим CSS:

.bigWrapper { 
    width: 1000px; 
    height: auto; 
    margin: auto; 
} 

.smallWrapper { 
    width: 500px; 
    height: auto; 
    margin: auto; 
} 

.sidebar { 
    width: 250px; 
    float: left; 
    height: auto; 
}