With Compass and Susy is it possible to set the outer most container to 100%?

[mopsy]

Hi,

I'm starting a new project and plan to use Compass and Susy, but I'm
not clear on how to set the outer container to 100%. Even though the
active content is within a fixed width, parts of the design elements
need a container of 100% -- and then within that a fixed width
container applied individually to each section. I'd also like the
fixed width to remain fixed, not fluie.

A good example of this is Facebook. The background of the menu bar at
the top extends across the window but the content of the menu bar is
within a defined pixel width.

Is this possible?

thx,
m.

[G. D. Speer]

In the facebook example, the container is NOT at 100%. The background menu
bar extends full width of the viewport not because it's a background of the
menu div or some other container div, but because it's a background of the
body tag with a repeat-x so that it fills the viewport.

Yes, you can set the container at 100% but that will not give you your
desired results.

--------------------------------------------------------------------------------



No virus found in this incoming message.
Checked by AVG - www.avg.com
Version: 8.5.423 / Virus Database: 270.14.40/2471 - Release Date: 10/31/09
07:53:00

[Eric Meyer]

If I understand what you are going for, you want to apply Susy's
'+container' mixin to the various internal containers that are a fixed
width. You don't apply any Susy mixins to the outer containers, and
they will be 100% width by default. If all you need is one repeating
background image, you just put it on the body (as G. D. recommended).

body
+susy

#outer
:background...

#header
+container

#content
+container

etc. You can have as many 'containers' as you need.

To use Susy for a fixed-width design, just set your !grid_units (in
_base.html) to 'px' and define column and gutter widths as px widths.

Susy still by default will not let the +container elements be larger
than the viewport. I recommend leaving it that way, but you can
override it by setting max-width on those elements to anything else
you like.

Hope that all makes sense.

Cheers,
Eric

[mopsy]

Merci beaucoup G.D. and Eric -- it's all in place and working!

[Pat V]

Hi Eric, (meant to post!)

When I have multiple outer containers with no mixin and I apply the
+container to the respective interior containers -- the layout is fine
-- but a background style for the outer containers (only when I have
multiple outer ones) isn't picked up. It feels like I need to define
the outer container in some fashion. I tried width: 100% but that
didn't work.

Any thoughts?

Thanks,

Pat

On Oct 31, 7:01 pm, Eric Meyer <eriii...@gmail.com> wrote:

[Eric Meyer]

It's a simple matter of float clearing. All declared column elements
are floating, which is usually all your content. That means all your
containers will collapse around them. Add any clearing method (Compass
provides `+clearfix` using the overflow: hidden; approach) to either
the `+container`s or the outer elements and you should be set.

Cheers,
Eric