HTML and CSS Reference
In-Depth Information
margin-right: 10px;
margin-bottom: 5px;
}
/* Make the topic elements tall enough to fit the image */
.book
{
min-height: 120px;
}
}
■
The previous style that you added for the medium size also applies to the small style since both apply to
widths less than 940px. The small style will define additional rules but keep in mind the previous styles apply as
well.
Note
The small layout rules make the following adjustments:
aside
element is moved to the bottom. This is done by undoing the table and
cell attributes that you entered in Chapter
4
and then changing the width to be 98%.
Previously, the #contentArea element had the
display
attribute set to table and the
#mainContent and aside elements were set to table-cell. By setting all three of these to
block, the virtual table is removed.
•
The
•
The content is displayed in two columns and this will be reduced to a single column.
•
To keep the links from wrapping, a 15px margin is defined and then the width is sized
automatically based on the content. This will remove most of the blank space between
them.
•
Since the header text can now use more than one line, change the line height so the lines
do not overlap.
intro
section to stretch vertically to ensure all the content fits.
•
Force the
•
Move the topic images to the left and the corresponding text to the right.
•
Ensure the topic elements are large enough to fit the image.
Display the web page with these changes and resize the window. With even very narrow pages, the site still
looks good, as shown in Figure
6-13
.
