shrink to fit forms

Forum Moderators: not2easy

Message Too Old, No Replies

shrink to fit forms

eric00

4:30 pm on May 23, 2005 (gmt 0)

I'm trying to add a form to a fluid layout, but it always takes up 100% of the available width. I want it to take up only as much room (width) as necassary to display it's contents, but I don't want to specify an absolute width anywhere because I want the layout as fluid as possible.

with tables this was easy, they always shrink to fit, but I'm really struggling to get this behaviour without using tables. can anyone help?

createErrorMsg

9:08 pm on May 23, 2005 (gmt 0)

You can try floating the form without specifying an explicit width. The result in modern browsers is "shrink-wrapping"; the floated element shrinks to fit it's contents.

Test page below.

cEM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body{
font: 70%/1.7 Tahoma, Verdana, sans-serif;
}
form{
float:left;
border: 2px solid #aaa;
padding:20px;
background:#369;
color:#fff;
text-align:right;
}
input{
width:100px;
border:1px solid #aaa;
}
</style>
</head>
<body>
<form>
<p><label>One: <input type="text" /></label></p>
<p><label>Two: <input type="text" /></label></p>
<p><label>Three: <input type="text" /></label></p>
<p><input type="submit" value="Enter" /></p>
</form>
</body>
</html>

eric00

6:11 am on May 24, 2005 (gmt 0)

that's excellent! just what I'm looking for. I love the way you put text-align on the form too, it saves having to style the labels.

thanks for your help.