Фиксированная ширина div справа, заполните оставшуюся ширину div слева

Im ищет способ иметь 2 divs в качестве столбцов, где div справа имеет фиксированную ширину, а div слева - оставшееся свободное пространство.

Кто-нибудь знает, можно ли это сделать?

Моя попытка (отображает блок2 под блоком 1):

<style>
.block1 {
   width: auto;
   height: 200px;

   background-color: green;
}
.block2 {
   float: right;
   height: 200px;
   width: 200px;

   background-color: red;
}
</style>

<div class="block1">test1</div>
<div class="block2">test2</div>

Ответ 1

Вы можете сделать это следующим образом:

HTML:

<div class="right">right</div>
<div class="left">left</div>

CSS

.left{
    background:red;

}
.right{
    float:right;
    width:200px;
    background:green
}

Проверьте этот живой пример http://jsfiddle.net/QHTeS/2/

Ответ 2

Поплавок Оба оставшихся элемента:

<style>
.block1 {
   width: auto;
   height: 200px;
   float: left;
   background-color: green;
}
.block2 {
   float: left;
   height: 200px;
   width: 200px;

   background-color: red;
}
</style>

<div class="block1">test1</div>
<div class="block2">test2</div>

Вы должны обернуть их в контейнер, чтобы предотвратить испортить остальную часть вашего макета.:)

http://jsfiddle.net/tcFjN/

Это было неправильно!

Используйте display: table; для родителя и display: table-cell; для детей:

<div id="wrapper">
    <div class="block1">test1</div>
    <div class="block2">test2</div>
</div>


#wrapper
{
    display: table;
    width: 100%;
}

.block1 {
       width: auto;
       height: 200px;
       display: table-cell;
       background-color: green;
}
.block2 {
       display: table-cell;
       height: 200px;
       width: 200px;
       background-color: red;
    }

http://jsfiddle.net/tcFjN/1/

Ответ 3

Проверьте этот jsfiddle

Начните с контейнера <div> (#container), который содержит как левый, так и правый <div> s. Поплавьте один <div> вправо и придайте ему определенную ширину (320 пикселей в моем примере). Затем дайте другому <div> абсолютное положение, начинающееся с абсолютного левого (0px) и заканчивающееся на левом краю <div> справа (320 пикселей).

Если вы отрегулируете ширину #container, правый <div> останется фиксированным на 320 пикселей, а левый <div> будет расширяться, чтобы заполнить любую оставшуюся область.

Ответ 4

Это мое решение без поплавков. Единственное предостережение в том, что мне нужно использовать обертку. Итак, если желаемый HTML

parent (has a border, margin, padding,...)
  left (fixed width)
  right (variable width, fill the entire space)

Я должен переписать его как

   parent (has a border, margin, padding,...)
      wrapper (has no styling)
        left (fixed width)
        right (variable eidthm, fill the entire space)

Мой HTML

  <div style="border:1px solid black; background:red; margin:10px; padding:10px;" >
    <div style=""> 
      <div style="display:table-cell; padding:10px; min-width:100px; max-width:100px;background:green;">Left</div>
      <div style="display:table-cell; padding:10px; width:100%; background:yellow;">Main content</div>
    </div>
  </div>

Основные моменты здесь:

Не использовать display: table, потому что мы не можем установить границу
Использование min-width, max-width
Использование ширины: 100%