I can't get my three columns col1 col2 col3 to appear. I'm trying to make my columns look like the photo below. Can anyone help me achieve this?
HTML
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
@import url("style.css");
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="topBar"></div>
<div id="wrap">
<div id="container">
Your site goes here
<div id = "col1">column1</div>
<div id = "col2">column2</div>
<div id = "col3">column3</div>
<!--end container--></div>
<!--end wrap--></div>
<div id="footer">
<!--end footer--></div>
</body>
</html>
CSS
Code:
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #000;
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {display: block;}
#wrap {
width: 100%;
margin: 53px 0 0;
padding: 10px 0 45px;
background: #fff
;
}
#container {
height: 450px;
width: 1000px;
margin: 0 auto;
background: #999;
}
#col1{
border-color:#930;
width:20px;
height:20px;}
#col2{
width:20px;
height:20px;
border-color:#930}
#col3{
width:20px;
height:20px;
border-color:#930}
#footer {
width: 100%;
height: 60px;
background: #333399;
}