DEMO!

So as you’ve seen what we are going to end up with. Let’s start working for it.

Add Mark Up:

Inside the content division start by adding a H2 heading and type any heading between the tags. Add a few paragraphs and at-least two images, give one of them a class of rightimg and the other one leftimg. You can add more images but make sure you give them any one of the two class I just mentioned.

<div id="content">
	<h2>This is a heading:</h2>
	<img src="./images/leftimg.png" alt="Title of the image" class="leftimg" />
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	<img src="./images/rightimg.png" alt="Title of the image" class="rightimg" />
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div><!-- end content -->

As we are adding content to the division I would like to share an amazing service I always use. It’s a Chris Coyier project called HTML-Ipsum. This is special: as clicking on any heading will copy the respective mark-up onto your clipboard. For example, if you want to add a couple of paras to the page, instead of finding the lorem ipsum routine online, go to HTML-Ipsum and click on Medium Paragraph come back to your source code and start pasting it. Trust me in the long run it will really make your life easier.

After we’ve added content to the content division, after the closing tags of content division and content-container division, right before closing tag of the container division(the main website container) add this code:

<div id="footer">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Feedback</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	<span id="copy">© Copyrights 2009</span>
</div><!-- end footer -->

If we view the page in the browser, we can see the non styled part of the page.

Let’s Style It:

The CSS code below should be added to the master CSS file. Due to some rendering issues on the page there were few minor tweaks(mostly width and border) I had to do in the master CSS file. Although I have notified most of the issues in the CSS file as comments, I would tell you a method to check the differences between your code and the downloadable source code available below. Google a software called WinMerge or goto: winmerge.org (for MAC users the software is: MELD). These softwares let you find differences between two text files. Just compare your master.css with my downloaded master.css and it will highlight all the differences for you. Me being a Windows User have experience with WinMerge and it’s awesome. As of MELD is supposed to be the MAC alternative for WinMerge and hopefully it will be good. Although I would like to know about it through the comments.

As of my CSS code, it is filled with explanatory comments and is pretty easy to understand.

/* Inside Content */

/*
I have changed the width of the content division we made in the last tutorial by 2 pixels as I have added 1 pixel left and right borders to it.
*/
#content{
overflow:hidden;/* as we will be floating elements inside this (mostly images)*/
/*you can and you should insert this property with the content division properties above I have placed it here to let you know that I have added this now*/
}
#content img{
background: #fff;
padding:5px;/*so the white background is visible*/
border:1px solid #000;
}
#content p{
margin-bottom:10px;
line-height:130%;/*to increase the vertical spacing between lines*/
}
#content h2{
font-size:25px;
font-weight:bold;
color:#263f5d;
font-family:Times, Times New Roman, Georgia, serif;
padding-bottom:5px;/*to make space between the border and text*/
border-bottom:2px dotted #263f5d;
margin-bottom:10px;
}
img.leftimg{/*a class for floating images left*/
float:left;
margin-right:5px;
}
img.rightimg{/*a class for floating images right*/
float:right;
margin-left:5px;
}
#footer{
width:958px;/*as there are left and right borders of 1px each which makes it 960*/
border:1px solid #444;
border-bottom:none;/*to remove the border-bottom*/
background:gray url('../images/footer-bg.png') repeat-x;/*just made a 1px wide and 80px long gradient image and repeated the background on the x-axis*/
height:80px;
line-height:80px;/*to vertically center the inline elements inside it*/
clear:left;/*for clearing the float of sidebar and content. had to insert it as the page wasn't rendering properly*/
/*for some reason our overflow hidden isn't clearing this float. Therefore the clear: left;*/
overflow:hidden;/*for clearing floats inside it*/
}
#footer ul{
width:50%;
float:left;
margin-left:10px;
}
#footer ul li{
display:inline;
margin-right:30px;
}
#footer ul li a{
color:#fff;
text-decoration:none;/*to remove the underline*/
}
#copy{
color:#fff;
float:right;
width:auto;
margin-right:10px;
}

If there are any queries please notify me in the comments and I will try my level best to help you with the code. You can also suggest tutorials you want in the comments. Also, please subscribe to my RSS feed, it will help me reach you much faster.

Thanks for reading!
Download the Source Code

Welcome to the community link feed. Here you can submit links with their descriptions to Web Development Tutorials, Tips, Techniques, etc. Once you’ve submitted the link it’ll come to me for approval, which once approved will then appear in the sidebar of the website until it’s in the latest 10. You can find all the user uploaded links at the Community Link Post.

You can add things like:

• Links to Tutorials
• Links to Articles
• Links to Download Resources
• Links to Online Showcases

You can submit your link by using the form below or by clicking the “Submit a Link” button in the sidebar.