Как использовать как фиксированный, так и эластичный контент CSS

Question

Я пытаюсь использовать как CSS с фиксированной шириной, так и эластичный контент, аналогичный тому, что видно в Календаре Google. Я предполагал, что это будет легко достижимо, используя минимальную ширину и максимальную ширину, однако у меня возникают проблемы с подэлементами, которые просто придерживаются своей минимальной ширины, а не растягиваются до максимума.

Демо можно увидеть здесь.

Answer 1

Вам на самом деле не нужно устанавливать минимальную / максимальную ширину в любом случае.

http://jsfiddle.net/UyZ6T/1/

Проблема была в основном float: left; на участке-1. Вам нужно только это на части фиксированного размера. Это в основном означает: "Я сейчас слева, а все остальное занимает место справа". Элемент div со свойством float пытается занять как можно меньше места, чтобы остальные могли растягиваться.

Answer 2

Удалить float:left от #stretch-1, играть на скрипке

Answer 3

По сути, вы пытаетесь создать плавный макет, который содержит элементы фиксированной ширины, вам нужно установить процентную ширину для всех родительских элементов, чтобы это работало как календарь Google - измените свой CSS на следующий

#container {
max-width:1280px;
min-width:260px;
    width:90%;
height:200px;
margin:auto;
background:#000;
}

#fixed-1 {
width:200px;
height:200px;
float:left;
background:#3fb44a;
}

#stretch-1 {
min-width:60px;
    width:20%;
height:200px;
float:left;
background:#c44d58;
}

#sub-content {
width:100%;
height:20px;
background:#4788ef;
}