Den 16.04.2014 03:17, skrev John Johnson:
they’d remain 3 across through tablet but then snap down to 1 column at mobile.
But at desktop/tablet, it would be 3 “widgets” of equal width and spaced
equally apart and to the right or left.
Quick demo (modified an old demo): for desktop/tablet, 3 containers
styled like shown in page-head should do...
http://www.gunlaug.com/contents/test/test-floating-boxes-c3c.html
With actual images in there, the '.image {height: 150px}' must be
replaced with 'height: auto'.
The '.floating {margin:1em 1% 0;}' along with container-width, should
ideally be too small to fill the outer container -- body in my demo, as
{text-align: center} on outer container takes care of exact centering.
Side-margins are there only to space the 3 containers a suitable
distance apart.
Play with it a bit, to see what you like best.
For links in each of the 3 containers I would use a "link-cover". Attach
::before or ::after to the actual link, and let it cover the entire
container. Description here...
http://www.gunlaug.com/contents/design/generated-content.html#p2
regards
Georg
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
