Floats and Forms

A presentation for the Web Standards Group

by Tony Aslett
Contents:
 Overview of some Tools
 CSS Creator
 CSS Layout Generator
 Float Containers
 Form Layout
CSS Creator
www.csscreator.com/version1/
 Lets you experiment with CSS in your
browser.
 It generates simple CSS
 You can try that style on your site or
someone else’s
CSS Layout Generator
One of the things most people have trouble
with when learning CSS is laying out a
site.
It is difficult because we expect too much?
 Same length columns
 Some columns fixed width others flexible

 Footer positioned correctly…

CSS Layout Generator
www.csscreator.com/version2/pagelayout.php
 The CSS Layout generator allows you to
generate a template for your site.
 Layouts can have one, two or three columns
which will always appear to be the same length.
 A header and footer
 Full page width or fixed width centred on the
page.
CSS Layout Generator
 Douglas Livingstone created a brilliant
layout which the generator is based on.
http://www.redmelon.net/tstme/3cols2/
 I was considering combining the Layout
Generator with a Menu Generator and
eventually making a whole site
generator.
List-[A||O]-matic
 At about this time there was a lot of talk about
using lists for menu’s.
 Russ Weakly of Maxdesign wrote the
List-a-matic
http://css.maxdesign.com.au/listamatic/
 Followed closely by the
List-o-matic by Ian Lloyd of Accessify
http://www.accessify.com/tools-and-wizards/list-o-
matic/list-o-matic.asp
CSS Layout Generator
 My plans were put on hold
 One day I may get around to it, but for
now I have enough to keep me busy.
Float Containers
If your new to floats you should read
these great articles
 http://www.maxdesign.com.au/presentation/floatsample.htm
 http://www.cs.hmc.edu/~mbrubeck/clear-after/
 http://www.positioniseverything.net/articles/float-theory.html
 http://www.positioniseverything.net/explorer/escape-floats.html
Float Containers
 For years it was thought that you needed
to have an extra element such as a
<div>, <hr /> or <br /> to clear floats.
 With the use of the :after pseudo element
combined with a height value we can
clear floats in most browsers without
adding any extra markup.
 Float Containers
The pseudo element :after
.container:after{content:”.”;
clear:both;
height:0;
display:block;
visibility:hidden;
}
Which works in most browsers other then IE
Float Containers IE
 Setting the height to 100% causes
problems unless the container is
contained in another fixed height
container.
 If an container is given a height that is
less then the height of it’s contents, IE
will expand the container to fit.
Float Containers
To give only IE the height value we can use the
Holly Hack from
http://positioniseverything.net
/* targets IE win and hides from IE5 Mac \*/
* html .container{
height:1%;
}
/* finish the IE only Holly hack */
Float Containers
What does this mean?
 we can now clear floats without any extra
markup.
 Works in most browsers.
 Slightly lighter pages
 Much cleaner pages
Float Containers - Browsers
http://www.csscreator.com/attributes/containedfloat.php
Works in
 Win IE 5, 5.5, 6
 Opera 6.05, 7.01, 7.22
 Win NN 7.2
 Firefox 0.8
 Mac Safari 1

Known to Fail in
 Win NN4 (nothing works)
Form Layout
 There are a number of ways to layout
forms, none are perfect.
 We don’t have time to look at all of them.
 Today we will look at two form layout
options.
Forms – label and field

Firstly lets briefly look at labels

 By default labels are inline elements
 They can be wrapped around the field or
associated to the field via the for attribute.
<label>name:<input name=“n” id=“n” /></label>

<label for=“n”>name:</label><input name=“n” id=“n” />

 Form Layouts
For these examples we will separate the
labels from the fields as it gives greater
positioning flexibility.
The aim is horizontally aligned labels and
fields, that degrade nicely in browsers
which don’t support CSS.
Form Layout - Divisions
 Many people use div’s to layout forms
 Usually they are used as rows and then
within the row as containers for each
label and field.
 Somewhat like a table.
Form Layout - Divisions
 They can be used to hold form elements.
 Lets limit their use to just the rows.
 So we start with a label and field and
contain them in a div that acts as a row.
<div class=“row”>
<label for=“name”>Name:</label>
<input type=“text” id =“name” name=“name” />
</div>
Form Layout - Divisions
 To act as a row the div needs to be
cleared on both sides.
 The label can be floated and given a
width.
 We will also align the text and add some
margin.
Form Layout - Divisions
.row{clear:both; }
label{
width:30%;
float:left;
text-align:right;
margin-right:1em;
}
 It can be as simple as that.
 The fields don’t need any styling to fall into line.
Definition List - Forms
 If only you could make any element a
label
<dt label-for=“name”>Name:</dt>
Definition list would be great for form
layout
 Already paired
 Consistent layout in most browsers
Definition List - Forms

Stop dreaming, we can still use definition

lists if we like.
 The markup is a little heaver then div’s
 Degrade well in older browsers without
CSS.
Definition List – Forms
<dl>
<dt>
<label for=“name”>Name:</label>
</dt>
<dd>
<input type=“text” name=“name” />
</dd>
</dl>
 Definition List - Forms
 To get the DT and DD on the same line
we can float the dt.
dt{float:left; clear:left;
width:30%; text-align:right;
margin:0 1em 0 0;
}
dd{clear:right; margin:0;}
Form Layout
 Radio buttons and checkboxes are a
slightly more tricky.
 I’ve put up a simple test page with a
couple of examples
www.csscreator.com/attributes/tests/form.html
Form Layout
 It might be an interesting project to build
a form layout generator.
 One that validated fields and lays out
forms.
 But not this week.

 Thanks for Listening.

 Some useful links
 http://css.maxdesign.com.au/floatutorial/
 http://www.maxdesign.com.au/presentation/definition/
 http://www.cs.hmc.edu/~mbrubeck/clear-after/
 http://www.mezzoblue.com/archives/2003/06/24/simple_it_ai/
 http://www.positioniseverything.net/articles/float-theory.html
 http://www.positioniseverything.net/explorer/escape-floats.html
 http://www.quirksmode.org/css/forms.html
 http://www.accessify.com/tutorials/better-accessible-forms.asp
 http://www.csscreator.com/attributes/containedfloat.php
 http://www.csscreator.com/attributes/tests/form.html