HTML and CSS Reference
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.
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:
margin: 66px 1% 10px 35%;
padding: 18px 0;
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.