Два divs, одна фиксированная ширина, другая, остальные

Ответ 1

Смотрите: http://jsfiddle.net/SpSjL/ (отрегулируйте ширину браузера)

HTML:

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

CSS

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

Вы также можете сделать это с помощью display: table, который обычно лучше подходит: Как я могу поместить элемент ввода в ту же строку, что и его метка?

Ответ 2

Вы можете использовать функцию calc() для CSS.

Демо: http://jsfiddle.net/A8zLY/543/

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

.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}

.right {
width:200px;
height:200px;
background:red;
float:right;   
}

Надеюсь, это поможет вам!

Ответ 3

Это 2017, и лучший способ сделать это - использовать flexbox, который совместим с IE10 +.

.box {
  display: flex;
}

.left {
  flex: 1;  /* grow */
  border: 1px dashed #f0f;
}

.right {
  flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
  border: 1px dashed #00f;
}

<div class="box">
  <div class="left">Left</div>
  <div class="right">Right 250px</div>
</div>

Ответ 4

Если вы можете перевернуть заказ в исходном коде, вы можете сделать это следующим образом:

HTML:

<div class="right"></div> // needs to be 250px    
<div class="left"></div>

CSS

.right {
  width: 250px;
  float: right;
}   

Пример: http://jsfiddle.net/blineberry/VHcPT/

Добавьте контейнер, и вы можете сделать это с вашим текущим порядком исходного кода и абсолютным позиционированием:

HTML:

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

CSS:

#container {
  /* set a width %, ems, px, whatever */
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  right: 250px;
}

.right {
  position: absolute;
  background: red;
  width: 250px;
  top: 0;
  right: 0;
}

Здесь div .left получает неявно установленную ширину из стилей top, left и right, что позволяет заполнить оставшееся пространство в #container.

Пример: http://jsfiddle.net/blineberry/VHcPT/3/

Ответ 5

Если вы можете обернуть их в контейнер <div>, вы можете использовать позиционирование, чтобы сделать левую <div> привязанной к left:0;right:250px, см. этой демонстрации. Я скажу теперь, что это не будет работать в IE6, поскольку только один угол <div> может быть абсолютно позиционирован на странице (см. Здесь для полного объяснения).

Ответ 6

1- У вас есть обертка div, установите прописку и маржу, как вам нравится
2- Сделайте левую сторону div необходимой шириной и сделайте ее плавающей влево
3- Установите правое боковое поле div равное ширине левой стороны

.left
{
    ***width:300px;***
    float: left;
    overflow:hidden;

}

.right
{
    overflow: visible;
    ***margin-left:300px;***
}



<div class="wrapper">
    <div class="left">
        ...
    </div>

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

</div>

Надеюсь, это сработает для вас!

Ответ 7

Существует немало способов достижения, отрицательные поля - один из моих любимых:

http://www.alistapart.com/articles/negativemargins/

Удачи!

Ответ 8

установите свое право на определенную ширину и поместите его, слева от вас установите значение margin-right на 250px

.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto

}

.right {
width:250px;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto
}

Ответ 9

Использовать простое это может помочь вам

<table width="100%">
    <tr>
         <td width="200">fix width</td>
         <td><div>ha ha, this is the rest!</div></td>
    </tr>
</table>