двухколонный макет с относительной шириной?

Question

У меня есть две колонки, использующие контейнер и div, называемый "left" и div, называемый "Right".Как мне убедиться, что div # right составляет всего 500px, но div # left настолько большой, насколько позволяет браузер пользователя ...?

Вот что у меня сейчас:

<div id="container">
  <div id="left" style="float:left"> </div>
  <div id="right" style="float: right; width: 500px"> </div>
</div>

Answer 1

Не перемещайте левый div влево.Если вы оставите его «без всплывающего окна», оно будет основным и автоматически заполнит доступное пространство.

Answer 2

Это можно сделать, открыв #left div и присвоив ему отступ слева, равный ширине #right div (это освобождает место для правого div) Наконец, вам нужно поменять местами исходный порядок обоих div'ов.

<div id="container">
    <div id="right" style="float: right; width: 100px; "> </div>
    <div id="left" style="padding-right: 100px; "> </div>
</div>

Вы можете увидеть его в действии здесь .

Answer 3

Измените свой стиль слева div на:

<div id="left" style="margin-right:500px"></div>

Это гарантирует, что содержимое не будет перемещаться под плавающим справа div, когда содержимое слева занимает больше места по вертикали, чем содержимое справа.

Важно

Не забудьте поставить плавающее div перед всплывающим. Поэтому сначала поместите правую в разметку, а затем левую.

Решение вашей конкретной проблемы

Итак, у вас есть два div элемента

<div id="endants-content">
    <div id="screenshot-preview">...</div>
    <div id="endants-main-content">...</div>
</div>

И CSS должен быть таким, чтобы он работал как положено:

div#endants-content
{
    /* put min-width here is you need it */
}

div#screenshot-preview
{
    float:right;
    width:30%;
}

div#endants-main-content
{
    margin-right:30%;
    overflow:auto;
}