CSU Ram Head Logo

JTC 372

Web Design and Management

Two-column layout example

Below is a very simple two-column layout, with code sample and CSS.

Header Content Here

Main Content Here

The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim.

Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! "Now fax quiz Jack! " my brave ghost pled. Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox. The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard's job is to vex chumps quickly in fog. Watch "Jeopardy! ", Alex Trebek's fun TV quiz game. Woven silk pyjamas exchanged for blue quartz. Brawny gods just

HTML Code

<div id="wrapper">
<header>Header Content Here</header>
<nav>Navigation Here</nav>
<div id="content">
<div id="main">Main Content Here</div>
<div id="sidebar">Sidebar Content Here</div>
</div>
<footer>Footer Content Here</div>
</div>

CSS Code

#wrapper {
 	max-width: 750px;
 	}
header {
 	background-color: #F9C;
 	}
nav {
 	background-color: #3FC;
 	}
#content {
 	background-color: #FFF;
	display: flex;
 	}
#main {
	background-color: #3FF;
 	width: 66.66%;

 	}
#sidebar {
 	width: 33.33%;
	color: #CF3;
 	}
footer {
 		background-color: #F93;
 	}