A brief history of layout techniques on the webLesson 7, Introduction to CSS Layout 1574 Save the page and preview it in your browser. All the list items are now stacked side
by side. Notice that the list inside the main content has not been aff ected. Add space
between the list items and add other styles as indicated in the following step.
Floating the list items causes them to be stacked side by side.5 Add the following code (highlighted in red) to your mainnav li rule:
#mainnav li {
fl oat:left;
width:120px;
height:25px;
background-color:#CCC;
text-align:center;
border-left:1px black solid;
border-right:1px black solid;
}In this code, you have done the following: defi ned the box around each list item as
120 pixels wide by 25 pixels high; added a background color; aligned each list item to
the center; and added a border to both sides of the item. Save the fi le and preview it in
your browser.
When you defi ne the width and height of the box, the text naturally sits at the top.
Unfortunately, while there is a text-align:center property that centers the text
horizontally, there is no simple way to vertically center objects in CSS. In this case, you
will use the line-height property to move the nav text downwards.