jeff adams

As a web designer moving from CSS from tables, one of the things that lingered was the need for tables when having forms on my pages.

I’ll be honest, I’ve not had much forms to create and even my own contact form utilises Wufoo because they just make my life hasslefree, and plus they can deal with spam and all that fun very easily.

But what if you have a better use for forms other than contact forms? What if you are collecting a tonne of information from a customer? Well  recently had this problem and I finally snapped with trying to re-sized the table, having it go over my floated elements and generally causing me headache after headache so I decided to sit down properly and work it out.

I don’t claim to take the credit for inventing this, as it’s probably (as I found) one of the most used parts of CSS that people use every single day but it amazed me how I could have gone this long and not known, so posted it up here will hopefully stop anyone else from doing what I did and leaving it so long to do anything about it.

So here was the solution:

Name


Address


City



label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;

As you can see all this really does is change the elements to be block level elements - not rocket science right? So you can feel my elation at finally solving this, and as easy it might sound, it caused me so many headaches in the past that it was a nice feeling to finally tame the beast down to what really is just a few lines of CSS.

Job done!