HTML and CSS Reference
In-Depth Information
You can also use a fixed or absolutely positioned element to create the containing block. For example, fixed_
absolute.html is an adaptation of fixed_end.html from the exercise earlier in this chapter. It has a search form
nested in the header<div> like this:
<div id="header">
<h1>Mediterranean Destinations</h1>
<form name="form1" method="get" action="#">
<label for="search">Search:</label>
<input type="search" name="search" id="search">
<input type="submit" name="go" id="go" value="Go">
The header<div> uses fixed positioning, so it acts as the form's containing block. The form is then positioned
by the following style rule:
#header form{
position: absolute;
right: 5px;
bottom: 1px;
As Figure 11-9 shows, this positions the form in the bottom-right corner of the header. Because the header
uses fixed positioning, the form remains onscreen in the same position when the page is scrolled.
Figure 11-9. The search form is fixed in position using a combination of fixed and absolute positioning
As in fixed_end.html, an Internet Explorer conditional comment in the <head> of the HTML page resets the
position property of the header<div> to static to overcome problems with IE 6 and IE 7. This makes the page
the form's containing block, so you need to change the offsets to keep the form inside the header. The following
style rule inside the conditional comment resets the right and bottom offsets to auto , and sets top to 100px :
#header form {
top: 100px;
right: auto;
bottom: auto;
padding-left: 10px;
color: #FFF;
These changes locate the search form at the bottom-left of the header, as shown in Figure 11-10 .
Search WWH ::

Custom Search