Navigation

Home
Search
Submit A Resource
Contact Us
About Functionn

Subscription Options


Subscribe By Email (265+)


Lists


Archives

May 18, 2012

Author: Hirvesh Posted At: 5/18/2012 Tags: , , , , , ,

NegativeGrid - A Lightweight, Fluid CSS Grid Based On A Technique Of Negative Margins

Share:
NegativeGrid is a lightweight, fluid CSS grid based on a technique of negative margins.  Negative grid uses a different approach to positioning columns than ordinary grids. Normally, the position of a column is relative to the column on its left (distance set with a left margin). In NegativeGrid the position of all the elements are calculated from the left border of the container. It is all possible due to a simple margin-right: -100% added to columns. There are many benefits of using this technique.

As you may have learnt Opera has problems with calculating percentages (percentage rounding bug) which can ruin the design and is a big problem with fluid layouts. It is especially visible with many narrow columns in a row. Since the positions of columns in the NegativeGrid don’t depend on the positions of columns next to them the possible differences of elements’ width are minimized.

Also, using this technique lets you change horizontal order of columns only by altering left margins – no need to change the order in html! Although I don’t recommended doing that because of accessibility reasons, it may prove quite useful with slideshows.

Requirements: None
Demohttp://chrisplaneta.com/free/negativegrid-demo/
License: Free

Daily Posts, Be Updated, Subscribe:

Want Free Web Resources? Enter Your Email And We'll Send It To You - Daily! (265+ Subscribers)

Yup, it's that straight forward! Enter your email address below and we'll send you the latest web resources to your inbox, everyday. We don't do spam. Ever.

Trending Posts On Functionn This Week

Share:

Other Interesting Resources:

0 comments:

Post a Comment

 


Recent Posts

Popular Categories



Popular Components



Popular Licenses