aligning checkboxes to the right of text

[7stud]

Hi,

I am trying to align some checkboxes to the right of the text describing the checkbox options. Since the choices are of various lengths, I have to do something extra to get the checkboxes to line up. Here is what I tried as an experiment:

<div class="div1">
   <span class="text">text</span>
   <span class="check_box">check box</span>
</div>

The way I understand the box model, <div>'s create 'block boxes', and block boxes are stacked on top of each other. On the other hand <span>'s create inline boxes which flow from left to right, one after the other.

So, it seems like I should be able to assign a width to the <div>, of say 100px, and keep the first <span> on the left(it is by default), and move the second <span> all the way to the right of the containing <div>. However, I can't figure out how to do that.

How do I do that, or should I be taking another approach to line up the checkboxes?

[Egor]

Float the check box right and float the text left. You shouldn't have div's inside a <form> BTW. Just specify widths for your spans.

You would also need to clear the floats by putting <br style="cleat: both;" /> at the bottom of the two.

[7stud]

Hi,

Thanks for the quick response.

You shouldn't have div's inside a <form> BTW.

Thanks, I didn't know that. What about <span>'s?

I wasn't considering floats. Is that the way to go?

I found one solution to my problem: position: relative. I had tried that before using right: 0. But, this time I used left: 30px. Why doesn't right: 0 work?

[7stud]

Found this in the HTML 4.01 spec:

A form can contain text and markup (paragraphs, lists, etc.) in addition to form controls.

Can you direct me to a seperation of style and content article that deprecates <div>'s in forms?

[Paul O'B]

Why doesn't right: 0 work?

It does work Its just that if you move the right corner of an element by zero pixels then it aint going nowhere (excuse the bad english lol)

Read the FAQ on positioning to understand the often misunderstood aspects of relative positioning.

Floating the element is the way to go Just float the check box to the right and let the text sit on the left. The check box will need to be before the text in the html if you are only floating one of them.

Can you direct me to a seperation of style and content article that deprecates <div>'s in forms

Very unlikely since divs are quite valid in forms I think mstwntd was having a bad day lol

Paul

[7stud]

Floating the element is the way to go

Ok. I was afraid it might escape.

Great FAQ--thanks Paul.

[gnarly]

You shouldn't have div's inside a <form> BTW.

Um... why not? Its perfectly valid code.

I'd probably do it this way:

<div class="formrow">
      <label for="checkybox">The text to go with the checkbox</label>
      <span><input name="checkybox" id="checkybox" type="" /></span>
      <div class="clearboth"></div>
</div>

div.formrow { width: 500px; }
div.formrow label { float: left; width: 75%; text-align: right; }
div.formrow span { float: right; width: 20%; text-align: left; }
div.clearboth { clear: both }

[7stud]

arrrgh. I need a dog catcher.

Floating the element is the way to go

Ok. I was afraid it might escape.

My worst fears have come to pass: the floats have escaped. All my checkboxes are on a single line over to the right, and all the text is on a single line over to the left:

<form name="f1" method="post" action="">
<div><span class="fleft">length</span><span class="fright"><input type="text" id="length" /></span></div>
<div><span class="fleft">width</span><span class="fright"><input type="text" id="width" /></span></div>
<div><span class="fleft">height</span><span class="fright"><input type="text" id="height" /></span></div>
<div><span class="fleft">volumetric</span><span class="fright"><input type="text" id="answer" /></span></div>
<span class="clear"></span>
<div><input type="button" id="button1" value="calc"/></div>
</form>

and here is my css:

.fleft{
float:left;
}
.fright{
float:right;
}
.clear{
clear:both;

I know...on my way to the faq.

[7stud]

ah ha! I need 'clear: both' for every div.

[Paul O'B]

Yes you must remember to clear floats when you want a new line

[7stud]

Hi,

I'm trying to produce a format like this:

     First: [textbox]
  LastName: [textbox]
     email: [textbox]

            [SUBMIT button]

...but I can't get the css below to work in FF1.0: the text and the corresponding checkbox end up on different lines.

<html>
<head><title></title>
<style type="text/css">
<!-- 

div.row{
	width: 700px;
}

span.col1{
	width: 15%;
	float: left;
	text-align: right;

	padding-right: 5px;
}

span.col2{
	width:85%;
	float: right;
	text-align:left;
}

.clear_both{
	clear: both;
}

-->
</style>

</head>
<body>

<div class="row">
	<span class="col1">First name:</span>
	<span class = "col2"><input type="text" name="firstname" /></span>
	<div class="clear_both"></div>
</div>


<div class="row">
	<span class="col1">Last name:</span>
	<span class="col2"><input type="text" name="lastname" /></span>
	<div class="clear_both"></div>
</div>

<div class="row">
	<span class="col1">Email address:</span>
	<span class="col2"><input type="text" name="emailAddress" /></span>
	<div class="clear_both"></div>
</div>

<div class="row">
	<span class="col1"></span>
	<span class="col2"><input type="submit" name="submit" value="Submit"/></span>
</div>

</form>

</body>
</html>

Also, how can I get put the Submit button a few lines below the last textbox? Position absolute?

[all4nerds]

Hello

A bit risky a standalone example of page without a DTD

Try 84 %

I have changed a few things to get the margins on the div to work in FF NS

Its runs now in IE6 FF NS7 OP7 Moz 1.8

PS i think you do not need to clear the float's because of the separete container (div's) see stript version

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<style type="text/css">

div.row{
	width: 700px;
	height:24px;/* */
}

span.col1{
	width: 15%;/*  */
	float: left;
	text-align: right;
	
	padding-right: 5px;
}

span.col2{
	/* width:80%; */
	float:left;
	text-align:left;
margin: 0 0 0 20px;
}

.clear-both{
	clear: both;
}
.mt{margin:20px 0 0  0;}
</style>

</head>
<body>
<form action="x">
<div class="row">
	<span class="col1">First name:</span>
	<span class = "col2"><input type="text" name="firstname" /></span>
	<div class="clear_both"></div>
</div>


<div class="row">
	<span class="col1">Last name:</span>
	<span class="col2"><input type="text" name="lastname" /></span>
	<div class="clear_both"></div>
</div>

<div class="row">
	<span class="col1">Email address:</span>
	<span class="col2"><input type="text" name="emailAddress" /></span>
	<div class="clear_both"></div>
</div>

<div class="row mt">
	<span class="col1">&nbsp;</span>
	<span class="col2"><input type="submit" name="submitx" value="Submit" /></span>
	<div class="clear_both"></div>
</div>

</form>
</body>
</html>

Stript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<style type="text/css">
.row{
	width: 700px;
	height:24px;/* */
}

.col1{
	width: 15%;/*  */
	float: left;
	text-align: right;
}

.col2{
	text-align:left;
	margin: 0 0 0 20px;
}

.clear-both{clear:both;}

.mt{margin:20px 0 0 0;}

</style>

</head>
<body>
<form action="x">
<div class="row">
	<span class="col1">First name:</span>
	<input type="text" name="firstname" class="col2" />
</div>

<div class="row">
	<span class="col1">Last name:</span>
	<input type="text" name="lastname" class="col2" />
</div>

<div class="row">
	<span class="col1">Email address:</span>
	<input type="text" name="emailAddress" class="col2" />
</div>

<div class="row mt">
	<span class="col1">&nbsp;</span>
	<input type="submit" name="submitx" value="Submit" class="col2" />
</div>
</form>
</body>
</html>

[Paul O'B]

Hi,

Ben beat me to it but I did this anyway so you can have 2 choices

<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
div.row{
 width: 700px;
 overflow:hidden;
 padding:5px 0;
}
span.col1{
 width: 15%;
 float: left;
 text-align: right;
 padding-right: 1%;
}
span.col2{
 width:84%;
 float: right;
 text-align:left;
}
.row input.submit{margin-top:15px}
.clear_both{
 clear: both;
 height:1px;
 overflow:hidden;
 margin-top:-1px;
}
</style>
</head>
<body>
<form action="">
  <div class="row"> <span class="col1">First name:</span> <span class="col2"> 
	<input type="text" name="firstname" />
	</span> </div>
  <div class="row"> <span class="col1">Last name:</span> <span class="col2"> 
	<input type="text" name="lastname" />
	</span> </div>
  <div class="row"> <span class="col1">Email address:</span> <span class="col2"> 
	<input type="text" name="emailAddress" />
	</span> </div>
  <div class="row"> <span class="col1"></span> <span class="col2"> 
	<input class="submit" type="submit" name="submit" value="Submit"/>
	</span> </div>
</form>
</body>
</html>

The reasonn that moz was on another line was because you had a full 100% and then you added 5px padding. You canm't mix both and expaect them to add up. As Ben said above if you use 84% for one measurement then you can safely add 1% padding and still add up to 100%.

Also it would be better and more semantic if you use the label tag instead of a span to mark up the form descriptions.

A bit late but hope it helps anyway

[7stud]

Thanks for both replies--they are both very informative. Thanks for the explanation Paul, and I'll try the label tag.