Two columns of text

by Matthew Day

HTML

<body>
    <div id="container">
        <h1>Headline</h1> 
        <div id="thick-col">
            <p>Duis aute irure dolor ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, quis nostrud exercitation sed do eiusmod tempor incididunt. Ut enim ad minim veniam, velit esse cillum dolore ullamco laboris nisi. Excepteur sint occaecat mollit anim id est laborum.</p>
            <p>Sunt in culpa cupidatat non proident, ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Velit esse cillum dolore lorem ipsum dolor sit amet, ut enim ad minim veniam. Velit esse cillum dolore ut enim ad minim veniam, eu fugiat nulla pariatur. Duis aute irure dolor cupidatat non proident, ut aliquip ex ea commodo consequat.</p>
            <p>Velit esse cillum dolore consectetur adipisicing elit, sed do eiusmod tempor incididunt. Excepteur sint occaecat in reprehenderit in voluptate quis nostrud exercitation. Velit esse cillum dolore ut labore et dolore magna aliqua.</p>
            <p>Mollit anim id est laborum. Consectetur adipisicing elit, ut aliquip ex ea commodo consequat. Duis aute irure dolor lorem ipsum dolor sit amet, ut enim ad minim veniam.</p>
            <p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Cupidatat non proident, ullamco laboris nisi excepteur sint occaecat. In reprehenderit in voluptate consectetur adipisicing elit, eu fugiat nulla pariatur. Mollit anim id est laborum. Sunt in culpa velit esse cillum dolore quis nostrud exercitation.</p>
            <p>In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, excepteur sint occaecat sunt in culpa. Sed do eiusmod tempor incididunt mollit anim id est laborum. Ut enim ad minim veniam, in reprehenderit in voluptate quis nostrud exercitation.</p>
        </div>
        <div id="thin-col">
            <ul>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Consectetur adipisicing...

CSS

body { margin:0; padding:0; border:none; }

#container { width: 80%; max-width: 1000px; min-width: 300px; margin: 0 auto; padding: 0; border: 1px solid purple;}

#container h1 { border: thin solid green; /* remove this line to remove the border */ }

#container h2 { clear: both; border: thin solid blue; /* remove this line to remove the border */ }

#thick-col { width: 78%; float: right; /* switch this to left and below to right to change the column locations */ border: thin solid black; /* remove this line to remove the border */ }

#thin-col { width: 20%; float: left; /* switch this to right and above to left to change the column locations */ border: thin solid red; /* remove this line to remove the border */ }