Results 1 to 4 of 4

Thread: need 2 columns liquid layout with unspecified width

  1. #1
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default need 2 columns liquid layout with unspecified width

    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>

  2. #2
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by oldandintheway; 10-11-2011 at 05:56 AM.

  3. #3
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    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;

  4. #4
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •