Extending div's across the width of the browser

When starting a Reflow project, you have the "Body" and a "Container". By default, the Container is 90% of the canvas. If you want items in the Container to extend across the width of the browser, make the Container 100% in width. Then, draw any other divs inside and make them 100%.

Is this what you are looking for?

Thanks,

Joan

So, this would look something like this:

Container (width: 100%)

     Header Div (width: 100%)

     Main Content Div (width: 80%, min-width: 800px)

You would set the main container to 100% (it is 90% by default in Reflow). Then, draw your header as a child of the Container. You'll set this header as 100% of the width. Under the header, you could draw another div that is only a percentage of the browser width along with a min-width or max-width, depending on what you are trying to accomplish.

Joan

We got around this by adding additional columns and treating them as outside the main content columns. Much like golden grid does: http://goldengridsystem.com 

In simplest terms, we took a 6 col content grid and made it an 8 col page grid adding much more outside space for horzontal bands that extended well past the central content columns.

You might need to add 2 or 4 cols plus the respective amount of additional gutters and you'll need to adjust it to make it clean. We use 8 because it allows nice round numbers of 9% per col and 4% per gutter and we can hard set the min and max per breakpoint.

You need to adjust to your grid to your specific needs, but this approach gets around the issues of full width backgrounds that move with content that are problematic in Reflow comps and gives us nice clean numbers to code with… 

Yeah, the grid in reflow is really just a visual and snap aid, it doesn't have any implications except for the min/max width in relation to the breakpoints. We use a lot of full width background images which don't really snap to the area outside the grid unless they're set to body, but want full page or at least much wider than half a gutter (via show outer gutter) content images and bgs. 

So it really depends on the min col grid you need and the hard 16 col limit is an issue for a grid that that has a higher common multiple for it's column variations. I.e. a 5 and 3 column design would need 15 for the content and 2 for the outside margin but that's over the limit.

For simplicity's sake we've moved to mostly 2-4 column designs which we can make work with a max 12+2 cols, but you have to figure out multiples that work out cleanly while maintaining a natural looking relationship of content to margins.

For that reason, and because of the platform on which we build most projects (NationBuilder) requiring a sidebar,  we've gone heavily to 3,2,1 col layouts which we can break into just six layout cols.

But another workaround we're using is to flop the grid and gutters so that we have 7 gutters of 12% and 6 cols of 4%. The grid is largely just a visual aid so it doesn't seem to have any implications so far. The issue we were having was that the outside gutters are only half width which doesn't work for our designs which tend to have a lot of common match ups and lineups. In that case you have the larger gutters which have a central snap guide as well which you may be able to repurpose to many more cols if you can come up with a clean grid is a lot of experimentation or a spreadsheet, the only way we were able to calculate all our variables into nice round numbers…

The simplest fix though is probably a lifting of the arbitrary limit on number of columns. I saw on another thread the devs were willing to consider that, they just needed a solid usecase to do so. A grid that accounts for a design with both 4 and 5 columns in it would require at least 20 cols, and 2 extra on the outside would probably be pretty useful so a 24 col max should allow for almost all contingencies…

So sad this hasn't been resolved. This renders Reflow almost useless for many designers. Macaw is doing this right, but that has yet to be released

Which part are you referring to? It seems like most of the issues people were talking about are resolved. The only ones that are still kinda out there are whether the outer gutter should be a half or a full gutter and an option for more columns in the grid.

If you could be more specific is what you are looking for that helps prioritize what features we work on next.

Thanks for your feedback.

Chris

I think everyone is getting their wired crossed. I came accross this issue and used the same solution that liberalart used. It's not great because you can only design up to a certain width.

The root of the problem is that the 'container' (the grid) is attatched to the 'page' (the body). While I'd expect to be able to set a max width on it. The breadcrumb trail in the UI even suggests that these are seperate things.

Essential what people are trying to acheive is this. 

To do this currently you'd have to set a 12 column grid - for a 10 column site - and deal with the fact that you aren't getting the space either side.

I may have confused things further. You can indeed set a max width on the container! But you can't add any elements wider than it onto the page.

Screenshot still stands!

Hey everyone,

I was wondering if I might show an example of what I think you're getting at.

It seems that when you want multiple objects with backgrounds that extend across the entire page, the Container object won't be able to handle the grid since it will not be in-sync where the design will be going.

I this example I have a grid with 15 columns, but the content is housed within 2 sections, one with 10 columns and the other with 4. With either section I'm not able to match the grid with the design.

Is this closer to the broad issue here? Thanks for this thread, getting to the bottom of these problems is super helpful!

- Seth

Seth,

Yep that's exactly the issue I was getting at, illustrated much better than I did!

Gonna add my voice to this since it's pretty much what's keeping me from using Reflow on a regular basis.

I think I understand what you're trying to do, and I think I finally figured out a way to hack it after some experimentation with Reflow. It's not perfect, but it's a lot more elegant than stretching out your container grid if you're looking for a maxwidth content area and a usable grid.

Make a box - position: Absolute, size: something very large. I used something like 2000%, although Reflow eventually changed it to 1367.48% for some reason

This will cause it to go off the screen to the right. Set the left position to a negative value around half of your size to shift it off the screen to the left. Now drop in your background color or image. If you're using a background image, set it to Scaling: Cover so it sizes to your browser width. You can also set the top and left position % so that when you shrink the viewport, it will crop in on a desirable area rather than the top left corner.

Next, place your content divs inside this div, and set them to Position: Relative. This will ensure that they stay on the gridlines when you resize your viewport (see screenshots). The width % you end up with may seem strangely tiny, but that's because it's using the super large parent div as the reference point.

Seems to work well for me, although I haven't tested it in every browser.

Any update on this? This is killing Reflow for me. I want to love it so bad.