Two Column CSS Layout (Parts 1- 2)
Two Column CSS Layout (Part 1-2)
Part 1 covers organizing your files, creating an HTML and CSS file and linking the .css file, and adding content to a two column web page including navigation, images, and text. Part 2 covers adding CSS (presentation) to a two column web page including styling navigation, images, and text. See below for the HTML and CSS for this video tutorial.
Part 1
Part 2
Below is the HTML and CSS for this video tutorial.
HTML
<html> <head> <title>Justine Jones</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"><img src="images/logo.gif" width="497" height="55" /></div> <div id="nav"> <ul> <li><a href="#">ABOUT</a></li> <li><a href="#">WORK</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">BLOG</a></li> </ul> </div> </div> <div id="content"> <div id="main_content"><img src="images/main_photo.jpg" width="550" height="367" /> <br /> <h1>Graffiti Paris</h1> <p>This is the piece of art created in Paris in 2010 while walking through the streets of the city. I noticed two men fighting and one gentleman lost his glasses. Graffiti Paris is created with oil paint.</p> <h4>September 23, 2011</h4> <h1>Fifth Floor Gallery</h1> <p>I'm happy to annouce that my art work will be featured at the<a href="http://www.fifthfloorgallery.com" target="_blank"> Fifth Floor Gallery</a> in Los Angeles from October 8, 2011 through December 18, 2011. The opening will be Saturday, October 8 at 8:00pm in the main space of the gallery.</p> <p>Please join me for the opening. You may RSVP at <a href="mailto:info@fifthfloorgallery.com"> info@fifthfloorgallery.com</a>.</p> <p>Fifth Floor<br /> 502 Chung King Court <br /> Los Angeles, CA 90012<br /> 213.687.8443<br /> <a href="mailto:info@fifthfloorgallery.com">info@fifthfloorgallery.com</a><br /></p> <br /> </div> </div> <div id="sidebar"> <div id="main_sidebar"><img src="images/justine.jpg" width="250" height="230" /> <p>My name is Justine Jones. I'm living, learning, and painting in Los Angeles.</p> <h2>let's connect</h2> <img src="images/facebook.png" width="51" height="51" /><img src="images/twitter.png" width="51" height="51" /><img src="images/linkedin.png" width="51" height="51" /> <img src="images/artwork1.jpg" width="250" height="188" /> <br /> <br /> <img src="images/artwork2.jpg" width="250" height="188" /> <br /> <br /> <br /> </div> </div> <div id="footer"> <p>© 2009 - 2011 Justine Jones </p> </div> </div> </body> </html>
CSS (style.css)
* { margin: 0px; padding: 0px; } body { margin-left: 0px; margin-top: 0px; background-color: #D7D7D7; } img { border: none; } #wrapper { width: 990px; margin-right: auto; margin-left: auto; background-color: #FFF; } #header { height: 130px; background-color: #a5b9c4; } #nav li { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #725d4c; display: inline; padding-right: 35px; list-style-type: none; } #logo { float: left; padding-top: 60px; padding-left: 60px; } #nav { float: right; width: 335px; padding-top: 85px; } #nav li a { color: #725d4c; text-decoration: none; } #nav li a:visited { color: #725d4c; } #nav li a:hover { color: #FFF; } #content { background-color: #FFF; width: 650px; float: left; } #main_content { width: 550px; padding-top: 40px; padding-left: 50px; } #main_content h1 { font-family: Verdana, Geneva, sans-serif; font-size: 30px; color: #787d80; padding-top: 15px; padding-bottom: 10px; } #main_content p { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; color: #787d80; padding-bottom: 20px; } #main_content h4 { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 100; text-transform: uppercase; color: #997b63; padding-top: 5px; padding-bottom: 5px; } #main_content a { font-weight: bold; color: #997b63; text-decoration: none; } #main_content a:hover { text-decoration: underline; } #sidebar { background-color: #eae6e6; width: 339px; float: right; border-left-width: 1px; border-left-style: solid; border-left-color: #997b63; } #main_sidebar { width: 249px; padding-top: 40px; padding-left: 50px; } #main_sidebar p { font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; color: #787d80; padding-bottom: 20px; } #main_sidebar h2 { font-family: Verdana, Geneva, sans-serif; font-size: 18px; font-weight: 100; text-transform: uppercase; color: #7a6453; letter-spacing: 1px; padding-bottom: 10px; } #main_sidebar img { padding-bottom: 10px; } #footer { height: 40px; background-color: #86969f; clear: both; } #footer p { font-family: Verdana, Geneva, sans-serif; font-size: 11px; color: #f9f5f5; padding-top: 10px; padding-left: 50px; }
6 thoughts on “Two Column CSS Layout (Parts 1- 2)”