10

I am working on a project in which the client wants the navigation <div> to align according to the screen height, similar to how margin-left as a percentage works when screen width is decreased.

So, I gave margin-top: 20% and navigation <div> displays that margin, but when I decrease the height of the window it does not adjust according the screen height although it works when I decrease the screen width.

My question is not how can I achieve that, but why does the percentage work horizontally and not vertically?

Here is an example: http://jsfiddle.net/sandeep/5VReY/

nullability
  • 10,545
  • 3
  • 45
  • 63
sandeep
  • 91,313
  • 23
  • 137
  • 155
  • 1
    Very peculiar, it seems as if the 20% related to the width and not the height (when I change the width, the margin-top changes), maybe one of the CSS freaks would be able to answer this one (it might actually be a bug). – Madara's Ghost Sep 01 '11 at 05:50
  • @Rikudo; yes may be it's a bug but if is someone explain me why is not happen & give an article link it's better – sandeep Sep 01 '11 at 06:05
  • @Rikudo: It's not peculiar, it's exactly as per css w3 spec. See [w3.org](http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#margin-properties) for the specs. – Arjan Sep 01 '11 at 06:06

2 Answers2

30

The percentage works on the width of the container block, according to the css specifications

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.

See w3.org for more information.

Arjan
  • 9,784
  • 1
  • 31
  • 41
  • Thank's arjan for the link :) – sandeep Sep 01 '11 at 06:25
  • 41
    What do the guys in w3c smoke or drink? I can't beleive sober man can bind margin-top and margin-bottom to width instead of height. – Roman O Nov 05 '13 at 12:52
  • @RomanO, maybe they shots? – Alex Antonov May 27 '14 at 16:55
  • 1
    @RomanO : Tying margin to percentage of containing block's height might end in an infinite recursion as they will change the height as well in certain scenarios. – user Jan 10 '15 at 07:25
  • 1
    Massive design flaw for sure. If you want margins that are equal all the way the around, then use units like EM, which are relative to a singular dimension like font size. Percentage, like EMs, are relative units, but unlike EMs, a percentage is relative to two potential dimensions -- width or height. To treat it as always relative to width, even on HEIGHT-related fields, is not only insanely unintuitive, but it also makes it impossible to collapse a child element to a -100% margin to have it 'slide up like a drawer' into it's parent to hide it. Terrible, terrible, terrible design flaw. – Triynko Nov 17 '15 at 18:16
  • And we're not the only ones who think this is stupid: "what kind of moron put this in the standard.. that's.. almost unbelievably stupid, basing vertical percentages on horizontal values." – Noishe http://stackoverflow.com/a/7661725/88409 – Triynko Nov 17 '15 at 18:24
  • @buffer, wrong. You simply limit the recursion when you have interdependent, reflexive layouts like that. I implemented a full-featured docking layout system in AS3 that allowed containers to not only automatically adapt to their children, but also have their children adapt to their containers, with properties like AutoWidth and AutoHeight including TextFields. All I had to do was limit layout passes and the number of recursive cycles. It would rarely ever exceed a single cycle, and in the most complex cycles it would never exceed 3. I capped it at 3 and it worked flawlessly. – Triynko Nov 17 '15 at 18:29
5

You can play width top/bottom properties having margin prop in "auto";

If you have a block like this:

<div class="centered"></div>

It may be centered verticaly like this:

.centered {
    width: 100px; height: 100px; /* must be present. No matter the value */
    position: absolute;          /* to props top/bottom take effect */
    margin: auto;                /* here's the magic. */

    bottom: 0px; top: 0px;       /* This is how you center a block verticaly */
}

The same can be achieved for horizontal alignment width left/right properties. You can also have an offset in order to ubicate other point than the center of the block.

Here I leave you some examples of what and how can be done combining these properties. http://jsfiddle.net/SQDJ6/

Viter Rod
  • 450
  • 6
  • 11