Двухколоночный макет CSS без необходимости указывать правый столбец

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

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

<html>
 <head>
  <style type="text/css">
    #left, #right {
     border: solid 1px #000000;
    }

    #left {
     float: left;
     width: 10%;
    }

    #right {
     float: left;
    }
  </style>
 </head>
 <body>
  <div id="left">I'm left</div>
  <div id="right">
   <p>I'm right.</p>
   <p>There is a bit more text here.</p>
   <p>Let's assume for a moment, that there is so much text here,
   that it cannot possibly fit on one line on any kind of monitor.
   For this purpose, I have to write a bit of nonsense, but there is
   always enough nonsense for this kind of task in the world.
   I could always ask a politician, I'm sure there isn't even a single
   cinema canvas in the world that could display such nonsense in a
   single line.
  </div>
 </body>
</html>

Обратите внимание, что если бы я удалил особенно длинный абзац, правый столбец был бы достаточно мал, чтобы поместиться на той же строке, и это сработало бы.

Есть ли способ, чтобы правый столбец занимал оставшееся место?


css two-column-layout
person theone    schedule 20.07.2010    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Хитрость заключается в том, чтобы поместить overflow:hidden на правую панель:

#left, #right {
       border: solid 1px #000000;
}

#left {
      float: left;
      width: 10%;
}

#right {
       overflow: hidden;
}
person fhd    schedule 20.07.2010

arrow_upward
0
arrow_downward

Это сделает это за вас:

#left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
}

#right {
    padding-left: 200px;
}
person Pat    schedule 20.07.2010

arrow_upward
0
arrow_downward

Я считаю, что то, что у вас уже есть, удовлетворит ваши потребности, если вы откроете его в IE. Но для Firefox установите свойство отображения этих двух элементов div в таблицу. Обратите внимание, что это значение не определено в IE.

#left, #right {
    border: solid 1px #000000;
    display: table;
}
person Hamid Nazari    schedule 20.07.2010