Here is a preview of how I want my final design to appear:
I am facing difficulty in properly aligning the two columns using my CSS code. Whenever I apply the float: left; property, the columns end up stacking on top of each other.
/*------ Code starts here -----*/
body {
margin: 0 auto;
padding: 0;
font: .75em/1.5em Helvetica, Arial, sans-serif;
color: #797267;
width: 960px;
background: #797267;
}
/**--- Headers ---*/
header{
width: 960px;
height: 210px;
background-image: url(../images/header-bg.jpg);
}
h1{
width: 317px;
height: 71px;
padding: 64px 0px 0px 64px;
margin: 64px 64px 0px 0px;
}
h2{
color: #423b2e;
size: 1.5em;
}
/*--- Navigation ---*/
nav{
color: #423b2e;
}
#current{
color: #bf3102;
}
ul {
list-style-type: none;
padding: 84px 64px 0px 0px;
float: right;
clear: left;
width: 277px;
}
li {
display: inline;
}
/*--- Banner --*/
div{
background-image: url(../images/main-content-bg.jpg);
width: 960px;
}
div #banner{
background-image: url(../images/banner.jpg);
width: 890px;
height: 200px;
margin: auto;
background-repeat: none;
}
/*--- Two-Column Layout Content (& Columns) */
#column1of2{
width: 450px;
padding: 25px;
}
#column1of2.page-flip {
background-image: url(../images/page-flip.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 450px;
margin: 0px 0px 45px 64px;
}
#column2of2{
width: 260px;
padding: 25px;
}
#column2of2.page-flip {
background-image: url(../images/page-flip.gif);
background-repeat: no-repeat;
background-position: left bottom;
width: 260px;
margin: 0px 0px 45px 44px;
}
/*--- Footer Design Area --*/
footer{
background-image: url(../images/footer-bg.jpg);
background-repeat: no-repeat;
color: #423b2e;
size: .9em;
text-align: center;
width: 960px;
padding: 92px 0px 0px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>BusinessName</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<header>
<h1><a href="index.html">Business Name</a></h1>
<nav>
<ul>
<li><a href="index.html" id="current">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="main-content">
<div id="banner">
</div>
<section id="column1of2" class="page-flip">
<h2>Who We Are (Header 2)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p>
<p>Nullam ultricies sem eget ornare lobortis. Phasellus leo ante, accumsan at felis nec urna.</p>
<p>Donec aliqueta pulvinar mauris vitae fermentum. Vestibulum placerat dictum tincidunt. Suspendisse potenti.</p>
</section>
<section id="column2of2" class="page-flip">
<h2>How You Can Benefit (Sub-header 2)</h2>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb1.jpg" /> Sed lacinia porta mattis.</p>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb2.jpg" /> Etiam vulputate mi et nunc facilisis, vel iaculis purus tempus.</p>
<p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb3.jpg" /> Vivamus consectetur massa ac blandit fringilla.</p>
</section>
</div>
<footer>
<p>© Business Name. All rights reserved. </p>
</footer>
</body>
</html>