HTML and CSS Reference
In-Depth Information
Figure 9-13
The More Information button is now positioned relative to its containing the <div class=”showcase”> ele-
ment.
Unfortunately, vertically centering an element via CSS isn't as straightforward as it could be. There
is
a
vertical-align
property, but it doesn't work in a way you may initially expect—it caught me out to begin with.
Continue with the
position
property for now and come back to the
vertical-align
property later in this
chapter along with a hack to make the showcase button vertically centered.
Make the footer stretch across the entire page (regardless of the page size and disrespecting the containing
<body>
element):
1.
In styles.css, add the following declarations to the
#footer
rule set:
left: 0;
position: absolute;
width: 100%;
2.
Save styles.css.