need 2 columns liquid layout with unspecified width [Archive]

oldandintheway

10-09-2011, 04:45 AM

I want to have two columns, side by side. The left column will contain a table and the right column will contain text. I have no idea how wide the table will be (that's the job of the table layout engine), nor do I know how much text there will be in the other column.

I know how to float the two <div> so they are side-by-side. Yes, I can specify that each one will be 50% wide. That works fine. The problem is that I do NOT want to specify the width of the columns (either with % or px). I want to let the browser decide how wide to make each column, in the same fashion that the table layout engine decides on the column widths in a table.

Reason: I don't care about text - it can flow as it wishes. But if I restrict the <div> width that contains the table, it's conceivable that 50% width will force it to render in a reasonable, but unaesthetic manner. Perhaps 45% or 55% would be fine - I don't know. I want to give the table layout engine as much space to do a 'good job' as possible.

So if I leave out the width specification on the two <div>, they won't be side-by-side. It appears that "float" will only work if it knows the width of the 2 <div>. Is there a CSS solution to this problem? If not, I will make a table with 1 row, 2 columns and let the browser figure out the width of the 2 columns.

I think the HTML layout engines for tables and text are a lot smarter than CSS.

Here's my test code with no widths specified, so the <divs> aren't side-by-side. If I uncomment the widths, they will be side-by-side, but I don't want 50% width.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>

<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<style type="text/css">
body { margin: 0;
padding: 0;
}
#container { width: 100%;
background-color: yellow;
}
#data {
float: left;
background-color: #88ff88;
/* width: 50%; */
}
#notes {
float: right;
background-color: #ffff88;
/* width: 50%; */
}
</style>
</head>

<body>
<p><strong>Simple map of points, lines and boxes</strong></p>
<div id="container">
<div id="data">
<table>
<tr><td>xxx xxx xxx</td><td>yyy yyy yyy</td><td>zzz zzz zzz</td></tr>
<tr><td>xxx xxx xxx</td><td>yyy yyy yyy</td><td>zzz zzz zzz</td></tr>
<tr><td>xxx xxx xxx</td><td>yyy yyy yyy</td><td>zzz zzz zzz</td></tr>
</table>
</div>
<div id="notes">alksjd lkajds kljad skjasd asdlkj
dslkj laksjd lkajds lkasjd lkjasd lkjas
dljas dljas dlka
</div>
</div>

</body>
</html>

oldandintheway

10-11-2011, 05:44 AM

Apparently at one time, a floated element required a width. According to this (http://www.w3.org/TR/CSS21/changes.html#q58):

Floats are no longer required to have an explicit width

Back to the example above. I overlooked something. If the window is wide enough, the two <div> are side-by-side. However, when the window is made more narrow, the right <div> will move under the left div. In other words, it would rather move it under the left <div> than wrap the text to fit. If you keep making the window more narrow (after it slides under the other <div>), it will then start to wrap the text within the right <div>. Strange.

macieQ82

10-14-2011, 09:12 AM

Try to do something like this in CSS:

#container { width: 100%;
vertical-align: top;
background-color: yellow;
}
#data {
float: left;
display: block;
background-color: #88ff88;
}
#notes {
float: left
display: block;
background-color: #ffff88;
}

And after #container div put any element with CSS property:

clear: both;

oldandintheway

10-15-2011, 05:09 AM

That doesn't work when the text in #notes increases. It will expand to the left and when there's no more room, it drops below #data and continues expanding to the left margin. After that, it starts wrapping, but by then, #notes is 100% width and below #data.