how do you center a div inside of another

[tangfucius]

say I have a span-20 div that I want to center inside of a span-24
div, how can I do that? I've tried margin: 0 auto, but it doesn't
seem to work?

[tangfucius]

[Chris Eppstein]

Add a prepend-2 class to your span-20

chris

[Rasal Postill]

<div class="span-24">
<div class="prepend-2 span-20 append-2 last>
</div>
</div>
--
Rasal Postill
Dance your Life - Biodanza in Holland - <http://www.danceyourlife.eu>

[tangfucius]

yeah that works, but only for span-20 and a certain set of span
width. what about wanting to center align a span-21 inside of a
span-24? Is there a way to center without using prepend and append
columns?

[JOE VELEZ]

How bout a nested div? And style "it".
...
<div class='span-24'>
<div class='yourClass'>
your stuff here
</div>
</div>
...

Style:

.yourClass{margin: 0 auto;}

- Joe

[JOE VELEZ]

Oohh.. add a width

[Chris Eppstein]

Blueprint doesn't have a way of doing this out of the box. You'll have
to add your own padding on the left and right to achieve a centered
appearance.

If you were using my framework called "compass" then you could do it
like so:

@import blueprint/modules/grid.sass
div#foo
+span(21, last)
+prepend(1.5)
+append(1.5)

More about compass at: http://github.com/chriseppstein/compass/


Chris

Hunt & pecked on my iPhone... Sorry if it's brief!

[Matthew Nuzum]

On Thu, Dec 4, 2008 at 11:57 AM, Chris Eppstein <ch...@eppsteins.net> wrote:
>
> Blueprint doesn't have a way of doing this out of the box. ...

>
> If you were using my framework called "compass" then you could do it
> like so:
>

> Chris

The tone of this really feels out of place in this mailing list. If
you're trying to make blueprint better then go for it, but it's a bit
impolite to say "use my product instead of blueprint."

--
Matthew Nuzum
newz2000 on freenode

[Chris Eppstein]

Matthew,

I can understand why you'd think that given the limited information in the post I made. Compass is not a stylesheet framework per-se, it is a way of writing stylesheets using a language called "Sass " instead of CSS. Compass contains a full port of the blueprint framework to a different language, but it is still blueprint in spirit and so I feel it is an appropriate use of this mailing list to speak about it. Also, please note that I first answered the OP's question by providing a solution that worked with blueprint-css. If there was a problem with my port or questions about its syntax etc, I would first move the conversation to the appropriate mailing list before addressing it.

The blueprint framework does a great job at setting up your typography and laying out a webpage, but it asks you to violate a basic tenet of web design: don't put presentation in your markup. Compass provides an abstraction between your markup and stylesheets so that you don't have to do that anymore. I'm not asking anyone to not use blueprint, I'm just trying to make their lives better by making their website easier to maintain.

If the blueprint team wanted to make a switch to Sass, I'm ready and willing to aid them in that switch. However, given that Sass is a relatively new syntax for writing stylesheets, I understand their reluctance to switch and so I'm happily maintaining my port for the time being.

Cheers,

Chris

[Christian Montoya]

On Thu, Dec 4, 2008 at 3:16 PM, Chris Eppstein <ch...@eppsteins.net> wrote:

> If the blueprint team wanted to make a switch to Sass, I'm ready and willing
> to aid them in that switch. However, given that Sass is a relatively new
> syntax for writing stylesheets, I understand their reluctance to switch and
> so I'm happily maintaining my port for the time being.

I just want to add to this. Blueprint won't be making a "switch" to
Sass, because Blueprint is not just a way to style webpages. It's a
foundation on top of which tools like Compass, Construct, etc. can be
built. People can use it in the raw form, and then it does require
that a basic foundation of web design be violated. Or they can use
Compass to do it the Sass way, or they can use Construct to do it the
WYSIWYG way. But all these "ways" exist because Blueprint exists, and
that was my goal in being involved with Blueprint to begin with.

Am I saying that people shouldn't hand-write their sites to use raw
Blueprint? Not at all! I do it all the time. In some cases, that's all
you can do. My point is that Blueprint is fine as a raw, core
foundation.

Now to the original point, there's nothing wrong with recommending
Compass as a further explanation, after an answer has already been
shared, which is exactly what Chris did. There are lots of things raw
Blueprint won't do, and centering a column without exact prepend-X
classes is one of them. It just goes against the basics of the grid
that Blueprint offers, and yes, the grid is not flexible.

--
--
Christian Montoya
christianmontoya.net