I’m trying to prototype a website using the 960 grid system. I’ve been at this for a couple days. I thought I was successful until i turned on “Developer Tools” to outline the block level elements and I noticed that the grids were not inside the container…I have no clue why.
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<!--meta name="viewport" content="width=device-width, initial-scale=1.0"-->
<!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<!--link rel="shortcut icon" href="/favicon.ico"-->
<!--link rel="apple-touch-icon" href="/apple-touch-icon.png"-->
<!-- CSS: implied media="all" -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/960.css">
<link rel="stylesheet" href="css/text.css">
<!--link rel="stylesheet" href="style.css"-->
<!-- Uncomment if you are specifically targeting less enabled mobile browsers
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=2"> -->
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<!--<script src="js/libs/modernizr-1.7.min.js"></script>-->
<style type="text/css">
body {
font-size:100%;
font-family:Georgia, "Times New Roman", Times, serif;
}
#nav {
margin:0;
margin-left: 26em;
padding:40px;
list-style-type:none;
}
#nav li{
display:inline;
right:0;
margin:0;
padding:20px;
font-size:1em;
}
#nav a:link,
#nav a:visited {
color:#000;
padding:10px 10px 10px 10px;
}
.gray {
background-color:#CCC;
}
</style>
</head>
<body>
<div class="container_12">
<div class="grid_12" id="top_bar"> </div>
<div class="grid_12" id="header"> </div>
<div class="grid_12" id="content"> </div>
<div class="grid_12" id="footer"> </div>
</div>
</body>
</html>
This is what I see in Dreamweaver:
This is what I see in Chrome:
Can someone please point me in the right direction? I’ve been at this simple task for a couple days…