Posted by roblav on February 24, 2012 at 2:01pm
I'm using a 16 col grid. In the file alpha-default-normal-16.css
.container-16 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.container-16 .grid-4 {
width: 220px;
}
.container-16 .grid-12 {
width: 700px;
}grid-4 is 220px width + 10px margin left & right = 240px
grid-12 is 700px width + 10px margin left & right = 720px
Which adds up to 960px but grid-16 width only = 940px, so my layout is broken.
Can anyone help? I'd like not to override the settings in my theme. Am I missing something.
Comments
Roblav, I believe your issue
Roblav,
I believe your issue is that you're not accounting for the 10px gutters on the outside of the 16-column grid. The grid itself is actually 940px + 10px on each side. Give that a shot and see if it fixes your issue.
I don't follow. The
I don't follow. The containing element is 960px:
.container-16 {margin-left: auto;
margin-right: auto;
width: 960px;
}
Then the grid-16 is 940px + gutters of 10px on each side
.container-16 .grid-16 {width: 940px;
}
So the width for the grid-4 and grid-12 to sit in is 940px, but the combined width of these 2 elements plus their margins is 960px.
So far I've overridden the default css file alpha-default-normal-16.css, and I'd prefer to use these settings.
To resolve it I've added this
To resolve it I've added this to my custom theme:
.container-16 .grid-4 {
width: 220px;
margin:0 0 0 10px;
}
.container-16 .grid-12 {
width: 700px;
margin:0 0 0 10px;
}
But I'm assuming that I shouldn't have to do that.
Sorry About That
Sorry about that. I think it's still a little early in the AM for me. Have you customized anything else from the default css?
It's a theme I've inherited,
It's a theme I've inherited, but I can't see anything obvious. Maybe I'll stripe it out some more to get to the bottom of it. Since I've checked the alpha-default-normal-16.css I was hoping to understand the width and margin settings and why they don't seem to add up.
Thanks for your help BTW
It's tough for me to help out
It's tough for me to help out without being able to see the markup myself, but how familiar are you with Omega? Are there overrides in the global.css that are possibly adding margins/padding that are breaking the grid layout? That would be the first place I'd look.
I apologize if you're familiar with Omega and I'm suggesting something you've already checked.
It doesn't seem to be
It doesn't seem to be 'overrides in the global.css that are possibly adding margins/padding'
I've removed all custom theme css and I still get the same results.
I guess what I'm really after is not so much fixing my theme as someone to explain to me the values in the alpha-default-normal-16.css file. After double checking them in the latest Omega download file they as follows:
.container-16 {margin-left: auto;
margin-right: auto;
width: 960px;
}
Then the grid-16 is 940px + gutters of 10px on each side.
.container-16 .grid-16 {width: 940px;
}
.container-16 .grid-4 {
width: 220px; //plus margins:0 10px - totals 240px
}
.container-16 .grid-12 {
width: 700px; //plus margins:0 10px - totals 720px
}
So the width for the grid-4 and grid-12 plus their margins totals 960px.
Why is it set up like this, seemingly by having a grid-4 and grid-12 in the same region equals a width larger than the containing element, grid-16.
I think I'm understanding you
I think I'm understanding you now. I'll try to explain if I can.
.container-16 .grid-16 {
width: 940px;
}
This is set at 940px because the 10px gutters get added to it to equal the total 960px. You wouldn't use this as the container for a grid-4 and grid-12.
The container for those two would just be the container-16, which doesn't add it's own gutters. It just centers the layout.
.container-16 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
When you add the grid-4 and grid-12 within the container-16, together with their gutters they equal the width of the container-16, or 960px.
Does that make sense?
Hi roblav,I've been
Hi roblav,
I've been following this thread all day on my phone, now I'm back in I thought I may try and shed some light. I have made two images which may help:
http://dl.dropbox.com/u/63070476/grid-16-example-full-width.jpg
http://dl.dropbox.com/u/63070476/grid-16-example.jpg
As you see, .grid-4 and .grid-12 will make up the width of .container-16.
If you want full width, you will ONLY have .grid-16 within .container-16.
The value of grid-4 plus grid-12 is not supposed to equal grid-16. Your layout if using the Omega theme should never end up with you having grid-4 and grid-12 within grid-16.
If you are talking about nested grids, when grid-4 and grid-12 MIGHT be inside grid-16, in that case, you must use the alpha and omega classes, i.e. grid-4 alpha, grid-12 omega, this will minus off the 10px left margin and 10px right margin respectively.
Hope this helps.
Sam.
Lol, mchristenson82 got there
Lol, mchristenson82 got there first...
Sam.
Lol, definitely a more
Lol, definitely a more concise explanation than mine. Well put, samwillc!
Great, that helps. It sounds
Great, that helps.
It sounds like there's some missing alpha omega classes or that the surrounding element needs to have the grid-16 class removed.
Now I know what I'm dealing with I'll be able to look for a fix.
You've both been very helpful. Thank you.
No probs, glad to help. Sam.
No probs, glad to help.
Sam.