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?