"Use the rest of the width" layout using CSS

[ddaiker]

I'm attempting to move to CSS layouts and away from table layouts as much as I can. But I can't figure out how to get an element to use "the rest of the width". Here is what I would do with a table.

<table style="width: 100%">  <tr>	<td style="width: 200px">Hello World</td>	<td><input id="txtOne" style="width: 100%;"></input></td>  </tr><table>

This gives me a label with a set width and then a text box that fills up the rest of the width of the the table's containing element.I've tried lots of various combinations of nested divs and spans using various css display values but I can't get the same effect.I need this because I don't know the width of my containing element but I want to maximize the size of my text box.I know this is probably one of those "duh", I should have thought of that things but I can't figure it out.

[jlhaslip]

Float the hello World left and give it a width. Then float the rest of the page left with a margin equal the width of Hello World column so it does not cover the column.Something like this: http://jlhaslip.trap17.com/samples/templat...left/index.html

[ddaiker]

Excellent, I knew it could be done. Now as a followup. What if I didn't know the width of the my left "column", I just wanted it to be as small as the browser can make it and then the right side fill the rest. My table example would look like this. In real life my "Hello World" would be some server side control that is set with server side code, sometimes completely empty.

<table style="width: 100%">  <tr>	<td>Hello World</td>	<td><input id="txtOne" style="width: 100%;"></input></td>  </tr><table>

[jlhaslip]

#rightcol{		 margin-right:6px;	/*	 margin-left:16em;	 */		 padding-left:6px;}#menu_column{	background-color: #FFFFFF; 	padding-left:10px; 	float: left;		padding-top:10px;   /*	 width: 15em;   */}

Comment out the widths of the columns using the above code one at a time and review the page in your Browser to see the effect it has. With the sidebar width removed, you will see that the right side will respect the space the side bar takes up. If you remove the content in the sidebars, the page will be, effectively, a single column.If you include the margin width of 16 ems for the right hand column, it will stay 16 ems from the left boundary, irregardless of the content in the left hand sidebar.Play with it and also check the Tutorials about floats, margins and padding to better understand the use of those attribute to position elements on an HTML page. Good Luck and have fun.