Exercise : Layout2

Add CSS/HTML to this HTML code to generate the layout on the next slide. You can add div, span, class, and id but nothing else.

<h1>Header</h1>

<h2>Area 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>

<h2>Area 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur ...</p>

<h2>Area 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</p>

Exercise expected layout

overall width 500px; column width 100px; 10px spacing around various elements
background colors: yellow, lightgray, lightblue; all fonts default

Header

Area 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Area 2

Lorem ipsum dolor sit amet, consectetur ...

Area 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Exercise solution

<div id="container">
	<h1>Header</h1>

	<div id="column1">
		<h2>Area 1</h2>
		<p>Lorem ipsum ...</p> 
	</div>

	<div id="column2">
		<h2>Area 2</h2>
		<p>Lorem ipsum ...</p>
	</div>

	<h2>Area 3</h2>
	<p>Lorem ipsum ...</p>
</div>

#container {
	background-color: lightgray;
	overflow: hidden;
	padding: 10px;
	width: 500px;
}
#column1, #column2 {
	background-color: lightblue;
	float: right;
	margin-left: 10px;
	width: 100px;
}
h1 {
	background-color: yellow;
}