Как реализовать фиксированную левую боковую панель и правильное содержание жидкости в CSS?

У меня появилась головная боль, как сделать мое содержимое жидкости плавающим вправо.

  • левая боковая панель фиксированного размера.
  • правильный контент - это размер жидкости.

Здесь и пример my html и css

Как сделать мой id="content" плавающим справа?

Ответы

Ответ 1

Установите поле и удалите float/width на #content, например:

HTML:

<div id="wrapper">
  <div id="sidebar">Sidebar</div>
  <div id="content">Content</div>
</div>

CSS

#wrapper {
    width:400px;
    overflow:hidden;
    padding:10px;
}
#sidebar {
    float:left;
    width:100px;
}
#content {
    margin: 0 0 0 100px;
}
div {
    border:1px solid #333;
}

http://jsfiddle.net/HWMJc/1/

Ответ 2

На самом деле существует еще более простое решение, которое я обнаружил не так давно. Хорошо работает в IE7. #fluid div будет перемещаться рядом с фиксированным исправлением и занять оставшееся пространство, сохраняя при этом отличную текучесть для всех чувствительных сайтов. Не нужно размещать поплавок или ширину на флюиде div.

http://jsfiddle.net/HWMJc/874/

#sidebar {
  float:left;
  width:100px;
}
#content {
  overflow:hidden;
}

Ответ 3

Вы должны установить его как:

sidebar{ width:100px; float: left}

Ответ 4

Не используйте 100% ширину на #content.

70% работает, но между этими двумя элементами существует небольшой разрыв. Вы можете настроить его, чтобы он лучше сочетался.