Exercise : Layout (by Alex Miller)

Generate roughly the given appearance, starting from this HTML and CSS code.

<div id="container">
	<div id="header">
		<h1>Header</h1>
	</div>
	<div id="left-column">
		<h2>Left column</h2>
		<p>Lorem ipsum dolor sit amet, consectetur ...</p>
	</div>
	<div id="right-column">
		<h2>Right column</h2>
		<p>Lorem ipsum dolor sit amet, consectetur ...</p>
	</div>
	<div id="content">
		<h2>Main content</h2>
		<p>Lorem ipsum dolor sit amet, consectetur ...</p>
	</div>
	<div id="footer">
		<p>Footer</p>
	</div>
</div>

• Bananas
• Apples
• Grapefruit
• Oranges
• Papaya

Exercise solution

ul {
	background-color: red;
	padding: 20px;
	text-align: center;
}

li {
	display: inline;
	border: 1px solid black;
	padding: 10px;
	background-color: white;
}