Two Column CSS Layout (Parts 1- 2)

Sep 29, 2011 by eaw in HTML/CSS

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>&copy; 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;
}