Im using the 960 css framework. I have this code:
<div class="container_16" id="header">
div class="grid_16">Header</div>
</div>
960 adds 10px gutters to the left and right side of the grids. I want to use the full 960 width. So I read to use alpha and omega to remove the 10px gutters from the left and right side. However is this the correct way of using the 960 framework?
<div class="container_16" id="header">
div class="grid_16 alpha omega">header</div>
</div>
<div class="container_16" id="nav">
div class="grid_16 alpha omega">nav</div>
</div>
<div class="container_16" id="body">
div class="grid_16 alpha omega">body</div>
</div>
<div class="container_16" id="footer">
div class="grid_16 alpha omega">footer</div>
</div>
Just doesnt seem like it was meant to be used that way. But I dont want the spacing on the left and right side.
The grid is designed to have gutters on the left and right sides. If you don't want to do that, you need to use alpha and omega classes. However, they were designed for nested block elements, not really for use in this way.
If the 960 grid is not fitting your preferences, change it until you like it. It is not meant to be something rigid, it's a jumping off point for you to customize and streamline.
Related
I have a page with a bunch of equal size divs that I want to fit responsively in the available space of a wrapper div.
The idea is that:
- in a large screen the divs will show in 3 columns
- in a medium size screen the divs will show in 2 columns
- in a phone screen the divs will show in 1 column.
I'd also like the wrapper to center horizontally.
I was trying:
#wrapper {margin:0 auto;}
.column {float:left; max-width:340px; height:540px; margin:20px}
It works as intended except that the wrapper doesn't center, which I was trying to achieve with line 1 of css.
Any idea how I can achieve this?
EDIT:
The HTML code:
<div id="wrapper">
<div class="column one">
</div>
<div class="column two">
</div>
<div class="column three">
</div>
</div>
If your requirements allow you to do so, I would suggest using a UI Framework such as Twitter's Bootstrap. They have components that would achieve exactly what you are attempting to do (see their grid system documentation).
Example
EDIT: Included grid documentation link & Example
I am using bootstrap's grid, and I would like to have a div that "breaks" the grid and is streched to the borders of the screen ('width:100%').
my code looks something like this:
<div class="container">
<div class="row">
<div class="span12">
div that is the width of the grid
</div>
<div class="unknown">
div that breaks the grid and has full width
</div>
</div>
</div>
how can I achieve this? is it common practice to open many different containers, or can I do this with divs nested with the container?
Use several containers rather than overriding the layout with custom styling.
Bootstrap themselves have examples with multiple containers being used, such as:
the carousel
I'm trying to implement the following scenario, using Twitter Bootstrap and Fluid Layout :
Left sidebar (I don't care whether the width is fixed or not) - occupying the WHOLE HEIGHT (no margins at all, like the sidebar in jsfiddle.net)
The rightmost part of the content, will occupy the remaining part of the window (fluid)
I've tried setting it up like that, but it definitely doesn't work (there are margins everywhere and the columns definitely don't occupy all of the vertical space) :
<div class="container-fluid" style="">
<div class="row-fluid" style="">
<div class="span3" style="">
</div>
<div class="span9" style='background:#fff;'>
</div>
</div>
</div>
Any ideas? How would you go about this?
Not totally sure but I think this might work...
Put height:100% on the html and body elements of your page.
Then give the element that you want to be the full height of the page a min-height:100%
Hope that helps.
How do I make the left and right gutters different colors with 960.gs? When I try something simple like:
<div style="background-color: green">
<div class="container_16">
<div class="grid_16">
test
</div>
</div>
</div>
<div style="background-color: cyan">
<div class="container_16">
<div class="grid_16">
test
</div>
</div>
</div>
The green and cyan colors are ignored. Seems like the "grid_16" class removes the color for some reason? My goal is being able to have different sections of the page in different colors all the way across the page, even past 960 pixels. So if someone makes their browser 1200px the left and right sides have the right color and the rest of the grid system is all contained within the 960 pixels in the middle.
I could add a background color to 'body' to do this for just 1 color, but I want multiple colors in the page. Like different colored horizontal stripes. Thanks.
Well, to understand the reason you need to understand how the grid layout works.
The thing is that when you tell the grid to be a certain width it also makes it floating.
Which means that your outer divs have the height of 0px.
So, in short. It doesn't remove the background colour, it just doesn't show it, because there is nothing to show (your grid is floating on top of it, so the actual size doesn't matter.
To solve it, just add a clearfix in the container and it should be solved. However, you also need to think about that the divs inherit the background colour per default.
<div style="background-color: green">
<div class="container_16 clearfix" style="background:white">
<div class="grid_16">
test
</div>
</div>
</div>
<div style="background-color: cyan">
<div class="container_16 clearfix" style="background:white">
<div class="grid_16">
test
</div>
</div>
</div>
Sticking two grid containers side-by-side is not a very smart way to produce horizontal stripes. If you want some containers to break past the grid's boundaries then adjust their margins appropriately, or put them behind (and outside) the grid entirely.
I am trying to build a page with the following in it:
Already have the following:
one div for page to center the whole page with width 809px
inside <div class="page"> is the following:
<div class="header">
<div class="container"> (container for content stuff)
<div class="footer">
What I am struggling with:
<div class="container"> should contain the following:
leftmost <div class="leftShadow"> with 100% height to container, with left shadow image as background for <div class="leftShadow">
second to left <div class="custom_content"> with 100% height to container (will contain content of page
second to right <div class="sidebar_right"> with 100% height to container (will contain extra links)
rightmost <div class="rightShadow"> with 100% height to container, with right shadow image as background for <div class="rightShadow">
So to summarise:
<div class="page">
<div class="header">header image</div>
<div class="container">
<div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
<div class="custom_content">(this is where the content would be)</div>
<div class="sidebar_right">(some other links)</div>
<div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>
So what is supposed to happen is, when either custom_content or sidebar_right div's strength in length below the other, the other one would stretch in height to be the same with as the longer div. Obviously, both side div's (leftShadow and rightShadow) should also stretch to 100% of the container's height.
Can someone please guide me in the right direction? Basically, these div's should behave much like a table would when one td's content stretches beyond the height of the other td's.
Don't use divs like tables!
The leftShadow and rightShadow divs are completely unnecessary. Combine your background images into a single image and set it as the background of your container div.
To make sure the background image fills the height of the container, set background-repeat: repeat-y.
Why not use something like "Faux Columns"?
See http://www.alistapart.com/articles/fauxcolumns/
Perhaps you won't need the leftShadow and rightShadow divs: take a look at faux columns.
This is what you are looking for, I hope. :)
I'd do this differently because you're not going to get your divs to behave like tables.
I'm not entirely sure what you're wanting this to look like, but I'm guess you want some sort of shadow image down the left and right side of the container div. How about removing the leftShadow and rightShadow divs, put a repeatable background image on the content div of width 809px (and maybe height 1, depending on what your shadow image looks like). Also perhaps set overflow:hidden on the content div - if I remember rightly thats a kind of hack which will make the containing div stretch in this situation.