HTML FORM’s unexpected effect on layout

I was recently looking back at some websites I’d created years ago and realized just how much of a hastle the HTML FORM tag used to be for page layouts.   This generally resulted in non-valid markup where the FORM tags themselves were improperly nested in TABLE, TR and TD tags.

Other than the obvious accessibility and semantic markup issues, there are two specific items that must be realized about the layout when working with a FORM.

The following examples assume the following source:

Hello<form>Again</form>World

FORM is a block element, forcing content around it to be separated:

Example displays as:
Hello
Again
World

  • FORM generally has a bottom margin to push content down below it.

Example displays as:
Hello
Again

World

  • CSS can fix both of these cases depending upon your specific problem:

<style type=”text/css”>
form { margin-bottom:0; display:inline; }
</style>

Example displays as:
HelloAgainWorld

 Cheers!