...

View Full Version : Tableless form issue



skalber
10-11-2007, 11:45 PM
How can I make the red span (which holds the input text) strech over the remaining space after the label in this form?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

</head>
<style>

#frm {
padding:0;
margin:0 auto;
width:30em;
border:solid;
border-width:1px 1px 1px 1px;
}
#frm form {
padding:0;
margin:0;
}
#frm label {
padding-right:0.5em;
height:2em;
width:10em;
text-align:right;
line-height:2em;
float:left;
border:solid;
border-width:0px 1px 1px 0px
}
#frm input {
float:left;
margin-top:0px;
font-size:10px;
}
#frm span {
height:2em;
float:left;
background:red;
border:solid;
border-width:0px 0px 1px 0px;
}
#frm #frmBottom {
height:20px;
background:#9D4AAB;
}
#frm br {
clear:left;
}

</style>
<body>

<div id="frm">
<form>
<label for="name">Name:</label>
<span><input id="name" name="name"></span><br>

<label for="address">Address:</label>
<span><input id="address" name="address"></span><br>

<label for="city">City:</label>
<span><input id="city" name="city"></span><br>
</form>
<div id="frmBottom"></div>
</div>

</body>
</html>

nikkiH
10-13-2007, 12:36 AM
Not totally sure what you mean...

This?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

</head>
<style>

#frm {
padding:0;
margin:0 auto;
width:30em;
border:solid;
border-width:1px 1px 1px 1px;
}
#frm form {
padding:0;
margin:0;
}
#frm label {
padding-right:0.5em;
height:2em;
width:10em;
text-align:right;
line-height:2em;
float:left;
border:solid;
border-width:0px 1px 1px 0px
}
#frm input {
float:left;
margin-top:0px;
font-size:10px;
width: 30.5em;
}
#frm span {
height:2em;
float:left;
background:red;
border:solid;
border-width:0px 0px 1px 0px;
}
#frm #frmBottom {
height:20px;
background:#9D4AAB;
}
#frm br {
clear:left;
}

</style>
<body>

<div id="frm">
<form>
<label for="name">Name:</label>
<span><input id="name" name="name"></span><br>

<label for="address">Address:</label>
<span><input id="address" name="address"></span><br>

<label for="city">City:</label>
<span><input id="city" name="city"></span><br>
</form>
<div id="frmBottom"></div>
</div>

</body>
</html>

skalber
10-13-2007, 12:55 AM
I give the main form div some width, width:30em; Inside it I give the label some width, width:10em; Now I somehow want that the span cell, <span><input id="name" name="name"></span>, streches automatically over the remaining space in that row. I tried giving it width:20em but it's not working properly.
nikkiH, what you have suggested gives the input width I want the span with red background fill the remaining row space while the input has fixed size=20 and label has fixed width..

rmedek
10-13-2007, 01:36 AM
Try giving the span "display: block", as it's an inline element which won't respond to any explicit dimension.

felgall
10-13-2007, 11:17 PM
Instead of changing a span to display:block you should use a div instead (which is exactly the same as a span with display:block but without the need to change the default).

skalber
10-14-2007, 03:21 PM
Thank you !! It worked ! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum