need 2 columns liquid layout with unspecified width

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

Code:

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

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:

Code:

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

Code:

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.

Thread: need 2 columns liquid layout with unspecified width

Thread Tools

Search Thread

need 2 columns liquid layout with unspecified width

Bookmarks

Bookmarks

Posting Permissions