What could be causing the yellow stripe (#header) to disappear when I apply "float left;" to "#header ul li"? Despite setting a fixed size for "#header ul li", I anticipated that the list items would line up next to each other horizontally, not exceeding the width of 300px in total. However, this is insufficient to cover the entire horizontal span of #header across the page.
Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#header {
background: yellow;
}
#header ul {
list-style-type: none;
}
#header ul li {
background: pink;
width: 100px;
float: left; // <--- this line is causing trouble!
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
</body>
</html>