CODEWITHSUNDEEP
asp.netcss
user1609429
user1609429

Reputation: 84

css 960 grid system issue

I am using 960 grid system with container_12. The issue is I am using 2 grid_6 col and text is overlapping. When I try setting the overflow property to auto I get a scrolling panel but the text does not shift on the next line after the width.

       <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/960.css" rel="stylesheet" type="text/css" />

    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/text.css" rel="stylesheet" type="text/css" />
    <link href="css/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="body" class="container_12">

    <div id="header" class ="grid_12">This is header</div>
    <div id="nav" class="grid_3">
    Navigation
    <ul>
    <li><a href ="google.com">Google</a></li>
     <li><a href ="yahoo.com">yahoo</a></li>
      <li><a href ="bing.com">bing</a></li>
    </ul>
    <p>dcjkldsjfkdjkljdsklvjkjvkdjkfljdskfjkdsjfkldjsfkjdksjkfjkd</p>
    </div>
    <div class="grid_9" >
    <div id="content">
    <h1>Content</h1>
    <p>The premise of the system is ideally suited to rapid prototyping, 
    but it would work equally well when integrated into a production environment. 
    There are printable sketch sheets, design layouts, and a CSS file that have identical  measurements.</p></div></div>
                   </div>
                  </form>
                  </body>
                  </html>
Problem here-:
<p>dcjkldsjfkdjkljdsklvjkjvkdjkfljdskfjkdsjfkldjsfkjdksjkfjkd</p>

Upvotes: 0

Views: 576

Answers (2)

user205200
user205200

Reputation: 1

I had the same problem. I had a "grid_3" and i put dummy content in there, but it kept spilling out of the div. I also just copied and pasted a word end to end to see what it looked like. I went back and added spaces between the words and it works perfectly. Doesn't expand outside of the div, it stops and expands vertically. What kind of bug or glitch is that in 960?

Upvotes: 0

zenkaty
zenkaty

Reputation: 1548

Make sure you have only one level of grids inside containers, eg:

<div class="container_12">
  <div class="grid_6"></div>
  <div class="grid_6"></div>
</div>

If you want to add padding to your content areas, add an extra div inside the grids, don't add padding to the grids themselves, ie.

<div class="container_12">
  <div class="grid_6"><div class="space"></div></div>
  <div class="grid_6"><div class="space"></div></div>
</div>

Upvotes: 1

Related Questions