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">
</form>
</div>
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
.
