4 Replies - 102 Views - Last Post: 10 January 2018 - 02:19 AM

#1 gunitinug  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 08-July 14

Usage of negative margin in Holy Grail layout

Posted 09 January 2018 - 10:43 PM

Please refer to:
http://alistapart.co...ygrail#section7

From the link:

STEP 4: PULL THE RIGHT COLUMN INTO PLACE
The only task remaining is to pull the right column into place. To do that, we just need to pull it out of the container and into the container’s padding. We’ll again use a negative margin.

#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}

Everything is now in its right place, and the wrapping disappears.


Anyone can explain how this happens? thanks

Is This A Good Question/Topic? 0
  • +

Replies To: Usage of negative margin in Holy Grail layout

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 5121
  • View blog
  • Posts: 13,790
  • Joined: 18-April 07

Re: Usage of negative margin in Holy Grail layout

Posted 09 January 2018 - 11:08 PM

The page you show there does a pretty good job of breaking down the parts and explaining the process. What exactly is confusing you?
Was This Post Helpful? 0
  • +
  • -

#3 gunitinug  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 08-July 14

Re: Usage of negative margin in Holy Grail layout

Posted 09 January 2018 - 11:09 PM

View PostMartyr2, on 10 January 2018 - 06:08 AM, said:

The page you show there does a pretty good job of breaking down the parts and explaining the process. What exactly is confusing you?

I don't get this part from above:

margin-right: -150px

Was This Post Helpful? 0
  • +
  • -

#4 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 5121
  • View blog
  • Posts: 13,790
  • Joined: 18-April 07

Re: Usage of negative margin in Holy Grail layout

Posted 09 January 2018 - 11:13 PM

Well, just like a number scale where you have zero in the middle and negative on the left, positive on the right you can move an element left by specifying a negative value for its margin. Likewise for the right margin, except in reverse. Specifying a negative right margin pulls the element right. It can be an unfamiliar concept because we don't often think of negative space but think of negative space as positive space for the opposite direction. Negative right margin is the same as positive left margin and negative left margin is positive right margin.

Hopefully that makes sense. :)
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • blow up my boots
  • member icon

Reputation: 6444
  • View blog
  • Posts: 26,066
  • Joined: 12-December 12

Re: Usage of negative margin in Holy Grail layout

Posted 10 January 2018 - 02:19 AM

There is a thorough article on negative margins here.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1