Moving a form with CSS

Well the JavaScript was the difficult one so now we have a gentle walk through doing the same with CSS.

Note

If you have come directly to this recipe then we suggest that you take a quick look at the previous recipe — Moving a form with JavaScript — before reading on, as the two are closely related and we'll refer back sometimes to save repeating too much.

Getting ready

We'll use the same Google Custom Search form, using the "Minimal" styling option (chosen in the setup configuration).

How to do it...

1. 1. If you look at the script you'll see that there is a CSS file linked but no snippet. This is fairly normal as CSS code is usually static and more amenable to being loaded from cached files than those parts of JavaScript that change depending on the form code. Here's the linked file:

   <link rel="stylesheet"
   href=http://www.google.com/cse/style/look/minimalist.css
   type="text/css" />
   

   We've already seen that this works perfectly well from the Form HTML box. And it's tidier...