Forum Moderators: not2easy
As it is, I have a table with one row and two cells. In each of these, I have a DIV that extends only as far as the content does and has a border and background. The right one fills whatever the left one doesn't (which, in turn, can expand to fit what it must). Everything is happy.
I have examined several ways to create a two-column layout.
So, finally, my question:
What way has anyone found to create two side-by-side columns, one of which takes most of the page, and the other of which expands to fit what it contains, while considering that each must have an individual border?
My greatest congratulations and thanks to whoever solves this conundrum.
I use 3 columns (left,separator,right), float everything left, and make the middle one (separator) just a few pixels wide and 100% height.
Might not have understood the problem totally though...
<html><head>
<style type='text/css'>
.left
{
float: left;
padding: 10px;
border: 1px solid #000;
}.separator
{
float: left;
height: 100%;
width: 2px;
}.right
{
float: left;
padding: 10px;
border: 1px solid #000;
}</style>
</head>
<body>
<div class='left'>
<h1>Left</h1>
</div>
<div class='separator'>
</div>
<div class='right'>
<h1>Right</h1>
<h2>foo bar foo bar foo bar foo bar</h2><h2>bar foo bar foo bar foo bar foo</h2>
</div>
</body>
</html>
(On another note, this may just be my user-agent. For others, does this example render with the right column expanded across the screen even when the content does not do so? This may be what is intended, and I'm missing it due to buggy software.)
I continue in my quest...
Floats don't seem like the right way to go. In the float-and-normal-stuff case, floats are meant to be items wrapped around by text (inline elements), not boxes themselves. In the float-and-float case, it's difficult (impossible?) to get floats to span the page without explicitly declaring percentages because floats are just meant to be wrapped around — they're not meant to acquire the screen as the actual content of the page.
To use floats for what they're not intended for seems in the same class of sin as using tables "incorrectly", not to mention that they don't work.
For this reason, I'm switching to strange little table system controlled by CSS:
<table><tr>
<td class = "dominated">
smaller column<br />
expands as needed
</td>
<td class = "dominator">
larger column, by default, takes up all space not used by the "dominated" column and, therefore, has room for wrapping text
</td>
</tr></table>
... with the stylesheet:
td.dominated {
white-space: nowrap;
width: 0px;
}
td.dominator {
white-space: normal;
width: 100%;
}
I feel silly doing this, but it's the most efficient way to attain a consistent and pretty result.
