Поместите контейнер div с правой стороны

Я хочу создать какую-нибудь служебную панель. Я могу расположить каждый элемент на этой панели бок о бок, используя float:left;

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

Взгляните на мою демонстрацию: http://jsfiddle.net/x5vyC/2/

Он должен выглядеть так:

enter image description here

Любая идея, как добиться этого, используя css?

Ответы

Ответ 1

Это то, что вы хотели? - http://jsfiddle.net/jomanlk/x5vyC/3/

Поплавки с обеих сторон теперь

#wrapper{
    background:red;
    overflow:auto;
}

#c1{
   float:left;
   background:blue;
}

#c2{
    background:green;
    float:right;
}​

<div id="wrapper">
    <div id="c1">con1</div>
    <div id="c2">con2</div>
</div>​

Ответ 2

  • Используйте float: right, чтобы.. плавать второй столбец.. справа.
  • Используйте overflow: hidden, чтобы очистить поплавки, чтобы отображаемый цвет фона был видимым.

Live Demo

#wrapper{
    background:#000;
    overflow: hidden
}
#c1 {
   float:left;
   background:red;
}
#c2 {
    background:green;
    float: right
}