All geek questions in one place

960 Grid System - 12 col - Touching the edge of the container

I am using 960 grid to try to create a layout ... I have the following code:

<div class="container_12"> <div class="grid_3 alpha"></div> <div class="grid_9 omega"></div> </div>

I use alpha and omega to remove left and right margins, respectively. This allows divs to touch the left edge of the container.

However, the problem is that the right omega_9 grid does not touch the right side. I understand why this is happening, but I do not know how to fix this behavior using methods 960.

Thanks,

+4
source share
3 answers

This can help understand the basics of the 960's grid structure. This framework is based on a very simple principle that combines fixed widths and margins to create a grid, such as a layout for quick site development. The entire infrastructure used float: left , which allows the sides to display side by side, as well as create a 20px buffer between each grid. And so I believe that you do not understand the use of the "alpha" and "omega" classes. These classes are designed to remove fields on grids that are children of other grids in order to multiply the margin.

Take this code, for example:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>960 Grid System &mdash; Demo</title> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/text.css" /> <link rel="stylesheet" href="css/960.css" /> </head> <body> <div class="container_12" style="background:blue;"> <div class="grid_3 alpha" style="background:yellow;">Grid_3 Alpha</div> <div class="grid_9 omega" style="background:green;">Grid_9 Omega</div> </div> </body> </html>

This creates something similar: Standard 960 layout you will notice that there is no field to the left of Grid_3, but there is a 20-pixel margin between Grid_3 and Grid_9. This is called Grid_3 having margin-right:10px and Grid_9 with margin-left:10px . When both divs float to the left, they create that distance. You will also notice that there is another 10px margin to the right of Grid_9. This is due to the fact that the left margin was deleted in Grid_3 and now the whole layout is shifted over 10px inside div_ container_12.

In order to describe the layout. Which from my understanding should look like this: 960 layout with float

You will need to either create a new class to apply float:right to Grid_9, or increase the width of Grid_9.

For this, inline will look something like this:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>960 Grid System &mdash; Demo</title> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/text.css" /> <link rel="stylesheet" href="css/960.css" /> </head> <body> <div class="container_12" style="background:blue;"> <div class="grid_3 alpha" style="background:yellow;">Grid_3 Alpha</div> <div class="grid_9 omega" style="float:right; background:green;">Grid_9 Omega</div> </div> </body> </html>
+5
source

You are not using the 960 system as it was developed. Fields deleted with alpha and omega classes will add up to 960 pixels.

Alpha and omega delete only the field on the left and right, respectively, they do not change the width. If you want this to work, you need to add the class to the grid_9 omega div, giving it a wider width than the standard width. 720px maybe?

 <style> .wide_9{width:720px;} </style> <div class="container_12"> <div class="grid_3 alpha"></div> <div class="grid_9 wide_9 omega"></div> </div>
+2
source

You need to use alpha and omega classes for child elements. If your layout should touch the fields (you use the background), the correct use of the alpha and omega classes will look something like this background attaching to the grid_12 div.

 <div class="container_12"> <div class="grid_12"> <div class="grid_3 alpha"></div> <div class="grid_9 omega"></div> </div> </div>

or if you don't need background alignment, you can just omit the alpha and omega classes

 <div class="container_12"> <div class="grid_3"></div> <div class="grid_9"></div> </div>

Both of these fragments should look the same in the browser.

0
source

Source: https://habr.com/ru/post/1379170/

More articles:


All Articles