[thelist] css percentages

[Anthony Johnston - Antix]

emma>Is there a specific reason you want to use floats?

yea,  complex forms,  getting there now with a lot less
hair than this morning tho'

I found that if you count the width as 95% rather than
100% you can get the effect I was looking for...

(first line of the form,  same principle applies for
subsequent lines)

<style type='text/css'><!--
#tblId {
	width:25%; height:22px;
}
#tblName {
	width:70%; height:22px;
}
.label {
	width: 100px;
}
.control input {
	width: 100%;
}

//-->
</style>
<div class='header'>My form</div>
<form>
	<table id='tblId' class='panel'>
		<tr>
			<th class='label' width='100'>
				<label for='id'>id</label>
			</th>
			<td class='control' width='*'>
				<div>3</div>
			</td>
		</tr>
	</table>
	<table id='tblName' class='panel'>
		<tr>
			<th class='label' width='100'>
				<label for='name'>name</label>
			</th>
			<td class='control' width='*'>
				<input name='name' />
			</td>
		</tr>
	</table>
	<div class='footer'><input type='submit'></div>
</form>

basically as the screen sizes the form field size too
to take advantage of larger screen resolutions.  I used
table for the 'control panels' because you can set a
text box to 100% and it will fill the available size

works nicely on ie6 and ns7
working on the graceful degredation to older browsers

Cheers now,  Ant.

>-----Original Message-----
>From: Emma Jane Hogbin [mailto:emmajane at xtrinsic.com]
>Sent: 25 February 2003 16:56
>To: tech at antix.co.uk
>Subject: Re: [thelist] css percentages
>
>
>On Tue, Feb 25, 2003 at 11:31:22AM -0000, Anthony Johnston - Antix wrote:
>> wasn't real code,  but ta anyway,  what I'm trying to get
>> at is; using percentages on floated items will never give
>> you a flush to the screen effect - when you add a border.
>
>Generally floats are worse than impossible to get right. :/ I find it much
>easier to do plain ol' positioned divs. Is there a specific reason you
>want to use floats?
>
>emma
>
>--
>Emma Jane Hogbin
>[[ 416 417 2868 ][ www.xtrinsic.com ]]