960.gs Problem

Get Started
1

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">&nbsp;</div>
    
    <div class="grid_12" id="header">&nbsp;</div>
    
    <div class="grid_12" id="content">&nbsp;</div>
    
    <div class="grid_12" id="footer">&nbsp;</div>
    
  </div>
  
</body>
</html>

This is what I see in Dreamweaver:

1023×463 22.8 KB

This is what I see in Chrome:

1023×596 21 KB

Can someone please point me in the right direction? I’ve been at this simple task for a couple days…

2

does anyone need more information? maybe the 960.css ? or the other files?

3

sorry for the third post in a row. I can’t seem to find an “Edit Post” button, if there is one. i think i found the solution.

<!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">&nbsp;</div>
    
    <div class="grid_12" id="header">&nbsp;</div>
    
    <div class="grid_12" id="content">&nbsp;</div>
    
    <div class="grid_12" id="footer">&nbsp;</div>

    [B]<div class="clear">&nbsp;</div[/B]>

    
  </div>
  
</body>
</html>

i neglected to add a div with class=“clear” at the end…thanks to all that took the time to look at the post =)