CSS Two Column Layout
Welcome to another CSS tutorial! In this one, I will create a two column CSS layout. I will also show you how to implement an external CSS stylesheet.
This layout will include a header, left column, content column, and a footer.
First we will write our HTML code.
<html>
<head>
<title>My first CSS Layout!</title>
</head>
<body>
<div id="container">
<div id="header">
<h2>Welcome to my site!</h2>
</div>
<div id="main">
<h2>Main Column</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam cursus. Duis blandit, odio non mattis dignissim, lorem ligula cursus nulla, quis tincidunt lectus risus et sapien. Pellentesque facilisis mauris vel ante. Cras at purus eget augue tincidunt gravida. Vivamus lobortis dui accumsan augue. Nam non neque. Mauris viverra adipiscing turpis. Sed ultricies lacinia ante. Praesent nibh nisl, ornare id, gravida in, euismod at, dui. Fusce at urna. Morbi posuere lacinia metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent ipsum orci, dapibus sit amet, vehicula at, facilisis eu, augue. Aliquam erat volutpat. Vivamus leo dolor, porttitor at, faucibus a, adipiscing in, pede. Nullam semper auctor ipsum.
</p>
</div>
<div id="left-col">
Navigation
<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
</ul>
<h4>Left Column</h4>
<p>Latest News</p>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
</ul>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
</html>
Now that we have all our HTML set up, we can start applying some CSS styles, to spice up our page. In the next block of code, I add the html, and body elemnts to our CSS file. Also, to generate dummy text (the text I used in the main column) visit Lipsum.com
html,body {
padding:0px;
margin:0px;
}
</style>
Copy and paste the above into notepad, and save it as main.css. Since we will be using an external stylesheet, we will have to add another line to our HTML. Add the line of HTML code below into the <head> </head> tags of the code.
That line of code tells us where to find our stylesheet. For this particular tutorial you should have your index.htm, and main.css files in the same folder. When you start making large sites, you should put your css files in a styles folder.