Float to Fix

The first issue we need to tackle is that because we’re floating the <li> elements, they’re taken out of the natural flow of the document and won’t fill up the outer <ul>, which defines our background color. In other words, because we float the inner elements, the outer <ul> doesn’t know how tall to be.

To fix this, let’s also float the entire <ul> along with everything else. This allows the <li> items to fill up the space, stretching the yellow background behind it. Due to the fact that floating an element “shrink-wraps” its contents (expanding only as wide or tall as needed), we’ll also add a specific width on the <ul>, imagining (for this example) that it lives inside a fixed-width layout of similar size (Figure 2.7).