960.gs layout issue

Question

I am trying to learn 960 grid system. My left body text appears on the right and vice versa for the other text. My intention is to have these two boxes on the same line. Left body text is appearing higher on the page than right body text too.

Any ideas? Confused!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Site name</title>
        <link rel="stylesheet" type="text/css" href="./960.css" />
        <link rel="stylesheet" type="text/css" href="./styles/main.css" />
    </head>

    <body>
        <div id="skip">
            <a href="#content">Skip navigation</a>
        </div>

        <div id="header" class="container_12">
            <div id="mainLogo" class="grid_4">
                <h1>Page name</h1>
            </div>

            <div id="testContainer" class="grid_8">
                <div id="mainNavigation">
                    <ul>
                        <li><a href="#">nav1</a></li>

                        <li><a href="#">nav2</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="content" class="container_12">
            <div id="contentleft" class="grid_8">
                <p>Left body text</p>
            </div>

            <div id="contentright" class="grid_4">
                <p>Right body text</p>
            </div>
        </div>

        <div id="footer" class="container_12">
        </div>
    </body>
</html>

This looks fine to me on [jsfiddle](http://jsfiddle.net/U9YeX/) in Opera, IE8, Chrome, and FF. Can you post a URL example? — Richard Marskell - Drackir, Apr 14 '11 at 21:26
How strange. Looks right to me there too. See here: http://jentestsite01.cjb.net/ — Jen, Apr 14 '11 at 21:33
By the above I mean. Looks correct on jsfiddle but not on the URL I provided. Glad this doesn't seem to be a simple problem! I checked on IE and Firefox too and still same problem. — Jen, Apr 14 '11 at 21:47

score 0 · Answer 1 · answered Apr 15 '11 at 03:47

For me (in Chrome 8), the problem is caused by the margin on the H1. Specifically, Chrome's user agent stylesheet is inserting:

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: 0.67em 0px;
}

The extra height to this h1 causes the contentleft div to start directly underneath the testContainer div.

Setting a margin of 0 removes the problem for me in Chrome 8.

Note the instructions for setting up 960.gs mention the use of the reset.css stylesheet:

<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
</head>

which should also remove this problem. It's generally good practice to include a reset stylesheet anyway, so if you're learning about the 960 grid system you should include this stylesheet.

score 0 · Answer 2 · answered May 06 '11 at 20:23

0

After every Line please add the div with the clear class.

First would be just after you close the div tag for id= mainLogo. And 2nd one would after you close the div tag with id = testcontainer.

answered May 06 '11 at 20:23

saush11

1

The clear_fix class is build to do this as part of the framework – John May 07 '11 at 08:55

score 0 · Answer 3 · answered May 07 '11 at 08:52

I have had the same issue. If you are using multiple containers on the same page you will also need to apply the clear_fix css class to to all but the first as the container class with try to position it's self at the top of the page.

 <div id="content" class="container_12 clear_fix">
 </div>

If you look at the source of any of the example sites on 960.gs they have done this where they use many containers.

960.gs layout issue

3 Answers3