当前位置: 动力学知识库 > 问答 > 编程问答 >

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?

网友答案:

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;
}
网友答案:

This would do it for you:

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

#right {
    padding-left: 200px;
}
网友答案:

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;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: