Button group on alighted right on bottom of form

225 views
Skip to first unread message

Bob Archer

unread,
May 15, 2012, 4:48:18 PM5/15/12
to bluepr...@googlegroups.com
How would I create a group of buttons that are aligned right along the bottom of the form. 

Sure, I could put the buttons in the last span, but they are floated left and start at the column. 

Say prepend-20 span-4 last ... but this doesn't right justify them?

BOb

Sean K. Stewart

unread,
May 16, 2012, 9:34:40 AM5/16/12
to Blueprint CSS
Hi Bob,

Here's an example of what I would do to align elements to the right.
http://seankstewart.com/blueprint/tests/parts/forms-test.html

I prefer to wrap my form elements in a paragraph element, and you can
simply apply the .right class to make all elements inside the
paragraph aligned to the right.

I've also included a sweet little gem to make the select and input
fields equal width. I've included the box-sizing: border-box property
on input, select, and textarea elements. This requires CSS3 and works
like on charm on modern browsers.

Please review the source for more details.

Sean K. Stewart
www.seankstewart.com

Bob Archer

unread,
May 16, 2012, 10:18:03 AM5/16/12
to bluepr...@googlegroups.com
Hmm... thanks. Interesting, I am not getting the right or clear class in my style sheet. I must not be telling compass to include them. I see.. that is part of the typography stuff... and if I bring that in it mess up my forms. 

But, putting them in a p tag with float right might do the trick... but having to clear stuff hurts my brain. ;) 

If only this were a project that we started styling with blueprint from the get go I could use more of these built in styles. We are mainly using the grid.

BOb


--
You received this message because you are subscribed to the Google Groups "Blueprint CSS" group.
To post to this group, send email to bluepr...@googlegroups.com.
To unsubscribe from this group, send email to blueprintcss...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=en.


Sean K. Stewart

unread,
May 16, 2012, 10:57:58 AM5/16/12
to Blueprint CSS
Bob,

If you do not want to deal with floats and clearing, you can also
apply text-align:right to the paragraph element. That will also align
elements within the paragraph to align accordingly.

Check out my example again, I've removed the .right class and added
inline text-align:right.
http://seanstewart.local/css_frameworks/Blueprint-CSS/Blueprint_1.0/tests/parts/forms-test.html

You could even use a div rather than a paragraph if necessary.

Sean K. Stewart
www.seankstewart.com

On May 16, 10:18 am, Bob Archer <b...@archer.net> wrote:
> Hmm... thanks. Interesting, I am not getting the right or clear class in my
> style sheet. I must not be telling compass to include them. I see.. that is
> part of the typography stuff... and if I bring that in it mess up my forms.
>
> But, putting them in a p tag with float right might do the trick... but
> having to clear stuff hurts my brain. ;)
>
> If only this were a project that we started styling with blueprint from the
> get go I could use more of these built in styles. We are mainly using the
> grid.
>
> BOb
>
Reply all
Reply to author
Forward
0 new messages