# Flash CSS styling **URL:** \ **Category:** Rails\ **Created:** [May 9, 2007, 7:23pm UTC](https://www.ruby-forum.com/t/flash-css-styling/103731 "2007-05-09T19:23:03Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [May 9, 2007, 7:23pm UTC](https://www.ruby-forum.com/t/flash-css-styling/103731/1 "2007-05-09T19:23:03Z")
I realize this is a CSS question, and not a rails question, so forgive the off-topicness, but I thought rails users might have some experience with this… In my app I typically set one of two flash messages to inform users on the sucess/failure of their actions. Ethier flash[:message] or flash[:error] will be set. I want this to appear in the same place as part of my site layout every time, so in my layouts/application.rhtml I have an “if flash[:message]…” and an “if flash[:error]…” just before my yield. I set CSS styles on them differently, message has a green box border and green text, error is red, both are centered, so on and so forth. The problem is that I always have different size text in those boxes, and so I can’t set the size of the div accuratley. Sometimes I have two or three words, in which case I have a lot of whitespace inside the box. If I make the box small then when I have longer flash text most browsers won’t expand the div to fit the text. Anyone run into this design issue before and know how to fix it? I suppose in application.rhtml I could do a character count of the flash and then size the div accordingly as part of the div tag, leaving all size info out of my stylesheet, but that seems like a little more math than I would prefer in a view. Thanks! ---
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [May 9, 2007, 7:31pm UTC](https://www.ruby-forum.com/t/flash-css-styling/103731/2 "2007-05-09T19:31:39Z")
removed\_email\_address@domain.invalid wrote: > The problem is that I always have different size text in those boxes, > and so I can’t set the size of the div accuratley. Sometimes I have > two or three words, in which case I have a lot of whitespace inside > the box. If I make the box small then when I have longer flash text > most browsers won’t expand the div to fit the text. > > Anyone run into this design issue before and know how to fix it? I > suppose in application.rhtml I could do a character count of the flash > and then size the div accordingly as part of the div tag, leaving all > size info out of my stylesheet, but that seems like a little more math > than I would prefer in a view. > > Thanks! I usually allow the div to expand to the width of the window (default behaviour), and simply give it a margin/padding. So rather than explicitly setting a width or height, I just let it vertically expand itself as necesary. This can be achieved by not setting width and height attributes. This may or may not work for your design. If you want horizontal strictching as well as vertical, you can float the div with “float: left;” but that may cause it’s own set of complex CSS issues depending our our design. ---
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [May 9, 2007, 8:07pm UTC](https://www.ruby-forum.com/t/flash-css-styling/103731/3 "2007-05-09T20:07:18Z")
removed\_email\_address@domain.invalid wrote: > Thanks for the try… > > I probably should have been more specific. In all cases there is not > enough text in the flash/div to wrap over more than one line. So what > I really want is to automagically size the horizontal to match the > contents and center the box. Alas there is no float: center. Try using a span instead. You’re describing the behavior of an inline element. Just wrap a div with “text-align: center” around your span. You should have no trouble setting padding background and border on a span to do what you want. ---
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [May 9, 2007, 8:00pm UTC](https://www.ruby-forum.com/t/flash-css-styling/103731/4 "2007-05-09T20:00:08Z")
Thanks for the try… I probably should have been more specific. In all cases there is not enough text in the flash/div to wrap over more than one line. So what I really want is to automagically size the horizontal to match the contents and center the box. Alas there is no float: center. To clarify: \*the div (and thus the box made by outline:) is always centered. \*when the contents of the div are “blah, blah.” I want the box to be just big enough to fit “blah, blah.” but when the contnts are “blah, blah, blah. Blah, blah, blah, blah blah.” I want the box to be just big enough to fit those contents. \*the div is always never more than row of text, in fact, I don’t currently set height or width, which results in the div filling the width of its container. Woe for a overflow: expand; option. —A On May 9, 1:31 pm, Alex W. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)