HTML and CSS Reference
In-Depth Information
◗
3.
At the bottom of the file, add the following style rule to align the story section
directly below the president's message, separated by a 20-pixel vertical margin:
/* Story section styles */
#story {
background-color: gray;
background-color: rgba(255, 255, 255, 0.8);
clear: left;
float: left;
margin: 20px 0px 0px 33%;
width: 66%;
}
◗
4.
Below the style rule you just added, add the following two style rules to float the
article and figure box side-by-side, with each one taking up about half of the
width of the story section:
/* Article styles */
#story article {
border-right: 1px solid black;
float: left;
width: 50%;
}
/* Figure box styles */
#story figure {
float: left;
width: 49%;
}
Figure 4-48 highlights and further describes the new style rules you just entered
into the style sheet.
Figure 4-48
Styles for the story section
displays the story section
when the left margin is clear;
floats the section on the left
with a top margin of 20 pixels
and a left margin of 33%; sets
the background color to gray
or semi-transparent white
floats the article on the left
within the story sec
tion with a
solid right border; sets the
width of the article to half of
the story section width
floats the figure box on the
left with a width of about half
that of the story section
