LAYOUTS - CSS: Professional Techniques for Modern Layout - page 149

< fieldset >
< legend > Search </ legend >
< input type ="text" name ="terms" id ="terms">
< input type ="submit" value ="Search">
</ fieldset >
</ form >
</ div >

You could position three things: the logo, the navigation links, and the search box.

However, you probably wouldn't want to position them all. Consider for a moment what
would happen if you did: h e header div wouldn't have any normal-l ow content, and thus
wouldn't have any height. It would be zero pixels tall. Or maybe one line of text tall, depend-
ing on what exactly you positioned and how browsers treated the let over whitespace. At any
rate, it wouldn't be tall enough.

Assume the logo is what you leave unpositioned. h at leaves you free to put the navlinks and
search wherever you like. First, establish a containing block (the technical term for a position-
ing context) for this to happen.

.header { position : relative ;}

Bingo: h at establishes a positioning context for any descendant elements. So if you want to
put the links into the upper-right corner, you start with this:

151

.nav { position : absolute ; top : 0 ; right : 0 ;}

Perhaps you want to put the search form in the lower-right corner. h e result is shown in
Figure 4-45.

.header form { position : absolute ; bottom : 0 ; right : 0 ;}

Obviously there's some other CSS at work here (otherwise the navlinks would be a bulleted
list) but you get the idea. h anks to positioning, you can put these things wherever you like
within the header. Want to put the search up top and the links below? Swap top for bottom
in the navlinks' rule, and vice versa in the form's rule, with the result shown in Figure 4-46.

.nav { position : absolute ; bottom : 0 ; right : 0 ;}
.header form { position : absolute ; top : 0 ; right : 0 ;}

Figure 4-45: Positioning elements within another element.