2 div в ряд: один резиновый, другой фиксированный

#html #css #div

Необходимо на страничке сделать 2 блока, которые бы в сумме занимали всю возможную
ширину. Правый блок узкий и не должен изменять своего размера при растяжении или сжатии
страницы, а левый должен занимать всю оставшуюся ширину. Попробовал своими силами,
но либо левый блок занимает не всё пространство, либо выдавливает правый на новую строку,
а такого быть не должно.



.div3 {
  max-width: 700px;
}

.div1 {
  height: 50px;
  max-width: 550px;
  background: #f99;
  width:100%;
  text-align:center;
  display: inline-block;
  float:left;
}

.div2 {
  height: 50px;
  background: #99f;
  display: inline-block;	
  float: right;
}

  
Резиновый блок
  
Фиксированный




    

Ответы

Ответ 1

Я знаю, что Flexbox так может. Его, правда, стоит применять с осторожностью, в IE
он багованный:



.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  height: 200px;
  border: 5px solid black;
}
.fixed {
  flex: 0 0 200px;
  background-color: #FF9999;
}
.rubbery {
  flex: 1 1 25%;
  background-color: #9999FF;
}

  

  




Ответ 2

Посмотрите внимательно, у вас .div2 сейчас никак не фиксирован. Задайте ему width явно.

Для вашей задачи display: inline-block не нужно, уберите его.
Уберите из .div1 параметр max-width.

Поставьте для .div1 свойство float: right, если блоки пшменяютмя местами, исправил
их положение в html-коде.

Должно помочь.


Ответ 3

Подобный вопрос уже обсуждался.

В вашем коде нужно применять либо float, либо inline-block.
и вычислять размер резинового блока с помощью функции calc.
Если использовать float, то не забывайте про clear, при использовании inline-block
необходимо у элемента родителя убить размер шрифта, для того чтобы убить пробелы между
блоками,которые возникнут так как блоки приобретут все свойства строчных элементов.
vertical-align: top в данном случае задается для того,что-бы блоки не съезжали вниз
при добавлении текста  в них.
Пробуйте эксперементируйте....... Однако разметка наfloat уже устарела и все чаще
используют именно inline-block. Более продвинутые технологии позволяют использовать
Flex, но его поддерживают только современные браузеры... и если ваш проект не нацелен
на кроссбраузерность, то лучше конечно использовать его.

Вот пример:



.a {
  height: 400px;
  background: red;
  font-size: 0; /*для отображения текста в блоках не забудьте задать размер шрифта им.*/
}
.b, .c {
  display: inline-block; /* можно использовать свойство float */
  vertical-align: top; 
}
.b {
  width: 200px;
  outline: 3px solid green;
  height: 400px;
  font-size: 14px;
}

.c {
  width: calc(100% - 200px); /* расчет ширины */
  outline: 3px solid blue;
  height: 400px;
  font-size: 14px;
}

  
фиксированный
  
резиновый



Ответ 4

Знать современные возможности flexbox и calc хорошо, но вот знать основы - куда важнее:



* {
  box-sizing: border-box;
}

.divMain:after {
  content: '';
  display: block;
  clear: both;
}
.divA {
  float: right;
  width: 200px;
  background: #99f;
}
.divB {
  overflow: hidden;
  background: #f99;
}

  

    Фиксированный блок
  
  

    Резиновый блок
  





P.S. Порядок блоков в разметке важен.


Ответ 5

Еще как вариант:



*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;  
}
.container {
  display: table;
  width: 100%;
  height: 200px;
  border: 5px solid black;
}
.fixed,
.rubbery{
  display: table-cell;
  vertical-align: top;
  padding: 25px;
}
.fixed {
  width: 150px;
  background-color: #FF9999;
}
.rubbery {  
  background-color: #9999FF;
}

  
text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
text text text text text text text text 
  
 text text text text text text text text text text text text
text text text text