Problem using float for forms

Leif K-Brooks · Sep 10, 2003

I'm using float in CSS to put form labels and descriptions to the left
of input boxes. To make the rows be rows, I have to use clear:both in
..formrow. The problem is, I'm also using float for a menu on the left of
the page, and I still want the input boxes next to the floating box. Is
there any way to make clear only apply to the label and description?

An example is at http://ecritters.biz/floatproblem.html.

Mark Parnell · Sep 10, 2003

Leif said:
I'm using float in CSS to put form labels and descriptions to the left
of input boxes. To make the rows be rows, I have to use clear:both in
.formrow. The problem is, I'm also using float for a menu on the left
of the page, and I still want the input boxes next to the floating
box. Is there any way to make clear only apply to the label and
description?

An example is at http://ecritters.biz/floatproblem.html.

Add #afterfloated {padding-left: 11%;} or similar.

HTH

Leif K-Brooks · Sep 10, 2003

Mark said:
Add #afterfloated {padding-left: 11%;} or similar.

Thanks, but that has nothing to do with my question.

Richard · Sep 10, 2003

Leif K-Brooks wrote:>>

I'm using float in CSS to put form labels and descriptions to the left
of input boxes. To make the rows be rows, I have to use clear:both in
.formrow. The problem is, I'm also using float for a menu on the left of
the page, and I still want the input boxes next to the floating box. Is
there any way to make clear only apply to the label and description?

An example is at http://ecritters.biz/floatproblem.html.

The values for "clear" are "none; left; right; both".
Try one and see which works.

SteW · Sep 10, 2003

Leif said:
I'm using float in CSS to put form labels and descriptions to the left
of input boxes. To make the rows be rows, I have to use clear:both in
.formrow. The problem is, I'm also using float for a menu on the left of
the page, and I still want the input boxes next to the floating box. Is
there any way to make clear only apply to the label and description?

An example is at http://ecritters.biz/floatproblem.html.

Is this something like what you want?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Float problem</title>
<style type="text/css">
.inline{display: inline;}
p.example{float: left; background: black; color: white; width: 10em;}
.foo{margin-left: 12em;}
</style>
</head>
<body>
<p class="example">This is a floated <code><div></code>
element. It has no real purpose, and is simply an example.</p>
<form action="#" method="get" class="foo">
<label for="input1" class="inline">Input 1</label>
<input type="text" id="input1" name="input1" />
<p>Text box for the purpose of demonstration</p>
<label for="input1" class="inline">Input 2</label>
<input type="text" id="input2" name="input2" />
<p>Text box for the purpose of demonstration</p>
</form>
</body>
</html>

Ste W

boclair · Sep 10, 2003

Leif K-Brooks said:
I'm using float in CSS to put form labels and descriptions to the left
of input boxes. To make the rows be rows, I have to use clear:both in
.formrow. The problem is, I'm also using float for a menu on the left of
the page, and I still want the input boxes next to the floating box. Is
there any way to make clear only apply to the label and description?

An example is at http://ecritters.biz/floatproblem.html.

I cannot see a reason to float the labels to the left. label is a inline
element and will flow naturally to the left as [label element][input
element]

Would something like this do as well

<div class="formlabel">
<label for="input1">Input 1</label></div>
<div class="formdesc"><label for="input1 data">Text box for the purpose of
demonstration.</label><span class="formwidget"><input type="text"
id="input1" name="input1" /></span>
</div>

Louise

SteW · Sep 10, 2003

SteW wrote:

That doesn't validate, partly due to xhtml <input /> instead of html
<input>, partly due to inputs/labels not being in a block element. Try
this validated version - it even looks better

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Float problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.inline{display: inline;}
p.example{float: left; background: black; color: white; width: 10em;}
.foo{margin-left:12em;}
</style>
</head>
<body>
<p class="example">This is a floated <code><div></code>
element. It has no real purpose, and is simply an example.</p>
<form action="#" method="get" class="foo">
<p><label for="input1" class="inline">Input 1</label>
<input type="text" id="input1" name="input1"><br>
Text box for the purpose of demonstration</p>
<p><label for="input2" class="inline">Input 2</label>
<input type="text" id="input2" name="input2"><br>
Text box for the purpose of demonstration</p>
</form>
</body>
</html>

Leif K-Brooks · Sep 10, 2003

boclair said:
I cannot see a reason to float the labels to the left. label is a inline
element and will flow naturally to the left as [label element][input
element]

I also want descriptions on the left of the input boxes.

Leif K-Brooks · Sep 10, 2003

Richard said:
The values for "clear" are "none; left; right; both".
Try one and see which works.

None work, because the description and label are on the same side as the
floating box I don't want cleared.

SteW · Sep 10, 2003

Leif said:
I also want descriptions on the left of the input boxes.

So something like this then? http://www.mastercooper.co.uk/float.html
If not, please describe more clearly what you want

Ste W

Leif K-Brooks · Sep 10, 2003

SteW said:
So something like this then? http://www.mastercooper.co.uk/float.html
If not, please describe more clearly what you want

I want the descriptions on the line after the labels.

SteW · Sep 11, 2003

Leif said:
I want the descriptions on the line after the labels.

like this?

input1 [text box]
description

or like this
input1 description [text box]

Ste W

Leif K-Brooks · Sep 11, 2003

SteW said:
like this?

input1 [text box]
description

or like this
input1 description [text box]

More like this:
input1 [text box]
description

SteW · Sep 11, 2003

Leif said:
SteW said:

like this?

input1 [text box]
description

or like this
input1 description [text box]

Click to expand...

More like this:
input1 [text box]
description

That is basically the layout given by my examples posted this^H^H^H^H
yesterday morning.
See it here: http://www.mastercooper.co.uk/float.html
Adjust the spacing between label and text box with
.foo input{margin-left:12em;}

The markup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Float problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
p.example{float: left; background-color: black; color: white;
width: 10em;}
.foo{margin-left:12em;}
.foo input{margin-left:12em;}
.no_margin{margin-left:0;}
</style>
</head>
<body>
<p class="example">This is a floated <code><div></code>
element. It has no real purpose, and is simply an example.</p>
<form action="#" method="get" class="foo">
<p><label for="input1" class="inline">Input 1</label>
<input type="text" id="input1" name="input1"><br>
Text box for the purpose of demonstration</p>
<p><label for="input2" class="inline">Input 2</label>
<input type="text" id="input2" name="input2"><br>
Text box for the purpose of demonstration</p>
<button type="submit" class="no_margin">send</button>
</form>
</body>
</html>

Ste W

rf · Sep 11, 2003

Leif K-Brooks said:
SteW said:

like this?

input1 [text box]
description

or like this
input1 description [text box]

Click to expand...

More like this:
input1 [text box]
description

Turn the problem around. Float the input elements to the right instead:

http://users.bigpond.net.au/rf/test/floatproblem.html

Netscape 4.x of course barfs.

Cheers
Richard.

Mark Parnell · Sep 11, 2003

rf said:
Cheers
Richard.

Both brucie and Richard are back. Everything will return to normal shortly.

rf · Sep 11, 2003

Mark Parnell said:
Both brucie and Richard are back. Everything will return to normal shortly.

Using the word "normal" in a post to alt.html is surely an oxymoron

Cheers
Richard.

Mark Parnell · Sep 11, 2003

rf said:
Using the word "normal" in a post to alt.html is surely an oxymoron

"Normal" is a cycle on a washing machine.

I meant normal for alt.html, which of course would be abnormal anywhere else
(except maybe alt.html.critique ;-) ).

SteW · Sep 11, 2003

rf said:
Turn the problem around. Float the input elements to the right instead:

There's always more than one way to do it

http://users.bigpond.net.au/rf/test/floatproblem.html

Netscape 4.x of course barfs.

Of course!

Cheers
Ste W

Box not floating next to each other	1	Dec 23, 2021
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
What is the recomended method for Laying out HTML forms?	23	Feb 28, 2008
Problem formatting forms w/ floats	2	Feb 16, 2008
How to paint an element in screen using javascript?	1	Jan 11, 2023
float problem, on of two boxes is being pushed down when openingfavoritesIE/or left bar in Opera	0	Oct 14, 2011
I want to include fees depending on the payment method, using the plugin "Deposits for Woocommerce"	0	Aug 17, 2022
Positioning CSS components	1	Nov 16, 2023

Problem using float for forms

Leif K-Brooks

Mark Parnell

Leif K-Brooks

Richard

SteW

boclair

SteW

Leif K-Brooks

Leif K-Brooks

SteW

Leif K-Brooks

SteW

Leif K-Brooks

SteW

rf

Mark Parnell

rf

Mark Parnell

SteW

Ask a Question

Similar Threads

Staff online

Members online

Forum statistics

Latest Threads