Home/ Questions/Q 6100653
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T13:24:41+00:00

I am going crazy. I am creating a website with the 960 grid system

  • 0

I am going crazy. I am creating a website with the 960 grid system and so far everything works fine – I do understand it. My only issue is the following, since the framework as itself is limited to 960 pixels, I do not understand how to make the website automatically fit to the various screen resolutions. Here is what I mean: I created a website that has repeating patterns to both of its sides, so instead of having it end at 960 pixels I would like the pattern on the left and the right side to repeat itself. I have three different patterns at three different parts of the website.
Example websites are:

http://www.assistly.com/
http://secondandpark.com/

It is a very basic problem and I tried to solve it with divs but could not find a solution.

<html>
<head>
<title>Prototype</title>
<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_24_col.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/demo.css" />
</head>
<body>

<div class="container_24">
<div id="header">
<div class="grid_1"></div>
<div class="grid_22">
<img src="images/main_header.jpg"></div>
<div class="grid_1 alpha"></div>
</div>   
<!-- End of Main Header -->
<div class="clear"></div>
<div class="grid_1">
</div>
 <div class="grid_22">
<img src="images/divider.jpg">
  </div>
<div class="grid_1">
</div>   
<!-- End of Divider -->
<div class="clear"></div>
<div class="grid_1">
</div>   
<div class="grid_2">
<img src="images/left_shadow.jpg">
</div>
<div class="grid_18">
</div>
<div class="grid_2">
<img src="images/right_shadow.jpg">
</div>   
<div class="grid_1">
</div>   
<!-- End of left right shadow -->
<div class="clear"></div>
<div class="grid_2 alpha">
</div>
 <div class="grid_20">
<img src="images/bottom.jpg">
  </div>
<div class="grid_2 omega">
</div>   
<!-- End of Bottom -->

<div class="clear"></div>
</div>
<!-- End of Container -->

</body>
</html>

Note that I use different patterns for the header and the divider.

Thanks for your help.

John

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I put my header id outside the 960 grid

    <div id="header"> 

<div class="container_12"> 

    <div class="grid_2"><img src="#" alt="#"></div> 
    <div class="grid_10"><p class="subtitle">#</p></div> 

    <div class="clear"></div> 
</div> 
</div>

    then in your CSS

    #header {
background: #686868 url(../images/bg_header.jpg); }

    So my header ID is full width, and the grid is inside that

    • 0