100% width inputs next to labels in tableless css form - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

100% width inputs next to labels in tableless css form

jchau

3:07 pm on Mar 19, 2008 (gmt 0)

10+ Year Member

I have a tableless css form. I want the labels to always take up 200px while the textbox fill the rest of the page. Percentage for textbox width doesn't work that well since the label width is fixed. I guess this is part of a bigger problem I am having with creating a page with css that has to support 'liquid' resizing.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css" media="all">
form div
{
clear: left;
display: block;
}
form div label
{
display: block;
float: left;
width: 200px;
margin: 0 0 5px 0;
}
form div input
{
width: 100%;
}
</style>
</head>
<body>
<form method="post" action="">
<div>
<label for="first_name">
First Name:</label>
<input type="text" name="first_name" id="first_name" value="" />
</div>
<div>
<label for="last_name">
Last Name:</label>
<input type="text" name="last_name" id="last_name" value="" />
</div>
<div>
<label for="address_1">
Address:</label>
<input type="text" name="address_1" id="address_1" value="" />
</div>
<div>
<label for="city">
City:</label>
<input type="text" name="city" id="city" value="" />
</div>
</form>
</body>
</html>

[edited by: SuzyUK at 2:21 pm (utc) on April 2, 2008]
[edit reason] fixed formatting [/edit]

jelle76

12:24 am on Mar 20, 2008 (gmt 0)

10+ Year Member

hm..

How about making the textbox width: 100% margin-left: 200px and label float:left width:200 ?

SuzyUK

2:34 pm on Apr 2, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi jchau and Welcome to WebmasterWorld.. have you got this sorted yet? if as you say this is only part of the problem trying to build a flexible site.. the solution below might work for both?

IE's quirky float model will enable you to do it (set hasLayout to true on the element next to the float), and so will overflow for compliant browsers, inc IE7 & 8..

You need to move the wrapper div (or add another if you want the outer one too) though so it's only wrapping the inputs it then clears the floats and enables you to tell the input to be 100% of it instead of the full width.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css" media="all">
form {margin: 0; padding: 10px;}
form label {
display: block;
float: left;
clear: left;
width: 200px;
margin: 0 0 5px 0;
}
form div {
zoom: 1; /* set hasLayout for IE6 and below to trigger quirky float model which means div clear the floats */
overflow: hidden; /* make inputs clear the floats to give the width you need - auto doesn't work here it creates scrollbar */
margin: 5px 0;
}
form div input {
width: 99%; /* FF cuts off right border if this is 100%; */
}
</style>
</head>
<body>
<fieldset><legend>The Form</legend>
<form method="post" action="">
<label for="first_name">First Name:</label><div><input type="text" name="first_name" id="first_name" value="" /></div>
<label for="last_name">Last Name:</label><div><input type="text" name="last_name" id="last_name" value="" /></div>
<label for="address_1">Address:</label><div><input type="text" name="address_1" id="address_1" value="" /></div>
<label for="city">City:</label><div><input type="text" name="city" id="city" value="" /></div>
</form>
</fieldset>
</body>
</html>

[edited by: SuzyUK at 2:35 pm (utc) on April 2, 2008]