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/

Reply via email to