Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Drew Gillett
Drew Gillett
156 Points

Adding a wide column in a grid system

Okay, I've figured out and understand the whole grid system concept. I've been going through the entire bootstrap/foundations framework lessons today, but I seem to be missing - because it doesn't seem to fit with the thinking of the grid - how to create a single column at the edges of my layout. Since columns are a subset of rows, and not rows of columns, this seems impossible, as this would require crossing multiple rows to create such a thing.

Please understand that the value here is in that it would allow me to pay for my website via various kinds of adverts like skyscraper banners and such, and that would be a huge benefit in my personal opinion. I also can use it to add forms on larger viewports potentially.

Any thoughts on how to add outer columns for such uses?

3 Answers

Maximiliane Quel
PLUS
Maximiliane Quel
Courses Plus Student 55,489 Points
Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points

if on the other hand what you want to do is just have for example one long column running down the right hand side all you need to do is create a row make two columns one with spanning maybe two thirds the other one a third of the width. then you nest all your content in the first and all your adds in the second.

not sure which solution you are really after.

Drew Gillett
Drew Gillett
156 Points

THAT'S the answer I was looking for. I just wasn't thinking straight. Thanks!!

Maximiliane Quel
PLUS
Maximiliane Quel
Courses Plus Student 55,489 Points
Maximiliane Quel
Maximiliane Quel
Courses Plus Student 55,489 Points

Do I understand you correctly and what you want to do is go all the way to the edge of the screen with your row so it is spanning the entire site?

If this is the case you need to put the rest of your content that is not supposed to go the entire length into a container and set it's padding: 0 15px; then you need to create the content that you want to be full-width outside of this container.

see the bootstrap documentation: link

Drew Gillett
Drew Gillett
156 Points

No, sorry if I wasn't clear about what I'm after. I'm trying to create a column that goes from top to bottom along the edge of my site (to be hidden in smaller viewports).