CSS установить ширину для заполнения% оставшейся области

Извините за незначительное название мусора. Я не мог подумать, как лучше описать это.

Я пытаюсь внедрить гаджет Google Friend Connect на моем сайте (только что попал в схему и хочу включить его без большой редизайна, по крайней мере для тестирования).

Моя проблема такова:

У меня есть контейнер div, который имеет ширину 90% от главной страницы (тела). Внутри этого я плаваю div справа и устанавливаю его ширину до 300 пикселей и помещаю гаджет Google в него. Я бы хотел, чтобы иметь div, заполняющий 95% пространства, оставшегося слева от div гаджета google.

Я не знаю, можно ли смешивать px и% с div и шириной.

Надеюсь, это имеет смысл.

Спасибо

Ответ 1

Это. Вы ищете полужидкую компоновку. Квест был первоначально святым граалем реализации CSS... Но, как вы можете видеть из этой ссылки (они делают 3 столбца, 2 исправлено, но легко изменить), это проблема долго решена =)

Ответ 2

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

Вот что я закончил:

http://jsbin.com/hapelawake

Ответ 3

Flexbox решение

.main {
  display: flex;
  width: 90%;
}
.col1 {
  flex-grow: 1;
}
.col2 {
  width: 300px;
  margin-left: 5%;
}

<div class="main">
  <div class="col1" style="background: #eee;">Left column</div>
  <div class="col2" style="background: #ccc;">Right column</div>
</div>

Ответ 4

Вам нужно создать алгоритм с использованием jQuery или JS, который проверяет оставшееся пространство и устанавливает ширину элемента "остаток" динамически, для реагирующей сборки. Если сборка не реагирует, вы можете проверить и установить ширину элемента, выполнив простые математические вычисления.

Мы столкнулись с подобными проблемами при создании медиа-системы с жидкостной чувствительностью.