HTML and CSS Reference
In-Depth Information
6.
Rather than doing complex calculations to equalize the heights of the long and short
items, the most practical approach is to shorten the item that's split over two lines.
Change
Eastern Mediterranean
to
East Med
.
use your browser's developer tools to inspect the
nav
unordered list. in Chrome or
Safari, right-click one of the menu items, and select
Inspect Element
from the context
menu. Then click the
<ul>
element in the panel that opens. As Figure
10-15
shows,
its height is zero. That's because all the list items are floated.
7.
Figure 10-15.
Floating the list items reduces the height of the unordered list to zero
8. Repeat the previous step to inspect the
main<div>
in the browser's developer
tools. you should see that its top margin of
15px
overlaps the top margin of the
nav
unordered list. At first, this seems inexplicable. Although adjacent vertical
margins collapse, the
aside<div>
comes between the unordered list and the
main<div>
in the underlying HTMl. However, both the
aside<div>
and all the
content of the unordered list are floated, which removes them from the normal flow
of the document. As a result, the top margins of the
nav
unordered list and the
main<div>
are considered to be adjacent—and that's why they overlap.
9. Select one of the list items in the developer tools to find its height. in Chrome,
it's
36px
.
10. To move the
main<div>
back into position, add the existing
15px
top margin to the
height of the list item (
36px
), plus another
15px
to move it below the menu—a total
of
66px
. Amend the top margin in the
#main
style rule like this:
#main {
width: 64%;
margin:
66px
1% 10px 35%;
background-color: #FFF;
padding: 18px 0;
}
11.
Save the style sheet, and view the page in a browser. in Safari, Firefox, Chrome, and
opera, the tops of the sidebar and main content are in alignment. in iE 9, there's a
5px difference, as shown in Figure
10-16
. The two elements are even further out of
alignment in iE 6 and iE 7.
