Two-Column CSS Layout without having to specify the right column

问题

I'm trying to figure out how to create a layout that would display two columns, one on the left and one on the right side. I'm cool with specifying the width of the left column, but because of margins and paddings, I really don't want to specify the width of the right column and leave it up to the browser to decide.

I cannot find any examples on doing this, people always seem to give all columns a fixed width. Here is some sample code that reproduces the problem:

<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>

Note that if I would remove the particularly long paragraph, the right column would be small enough to fit in the same line and it would work.

Is there a way to have the right column take up the remaining space?

回答1:

The trick is to put overflow:hidden into the right panel:

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

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

#right {
       overflow: hidden;
}

回答2:

This would do it for you:

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

#right {
    padding-left: 200px;
}

回答3:

I believe what you already have fulfills your needs if you open it in IE. But, for Firefox set display property of those two divs to table. Note that this value is undefined in IE.

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

来源：https://stackoverflow.com/questions/3291610/two-column-css-layout-without-having-to-specify-the-right-column

标签

css

two-column-layout