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

Question

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

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

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

Как заставить мой id="content" всплывать справа?

Answer 1

Установите поле и удалите значение с плавающей точкой / ширину на #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/

Answer 2

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

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

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

Answer 3

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

sidebar{ width:100px; float: left}

Answer 4

Не используйте 100% ширину на #content.70% работает, но между двумя элементами есть небольшой разрыв.Вы можете настроить его так, чтобы он лучше подходил.