Downsides of margin: auto

  • rmathewson

    (@rmathewson)


    12 years, 10 months ago

    On this page, I would like to BOTH have the section “Primary” automatically centered and overlap over the upper green background. However, using the “margin: 0 auto; ” (on line 479 of style sheet) negates any commands that would move the section up in the Y direction.

    Can someone suggest a different combination of formatting that would allow me to achieve the desired effect?

Viewing 5 replies - 1 through 5 (of 5 total)
  • WPyogi

    (@wpyogi)

    12 years, 10 months ago

    You can change the zero – it does not affect centering. Margins are set: top, right, bottom, left – which can be abbreviated:

    i.e. 0 auto is the same as 0 auto 0 auto

    Only the auto affects side – centering.

    Thread Starter rmathewson

    (@rmathewson)

    12 years, 10 months ago

    Changing the zero doesn’t have effect in either the positive or negative direction.

    WPyogi

    (@wpyogi)

    12 years, 10 months ago

    Because of this:

    #main {
    clear: both;
}

    Thread Starter rmathewson

    (@rmathewson)

    12 years, 10 months ago

    @wpyogi nailed it.

    Though, if I negate “clear: both;”

    I need to use this style to achieve the desired look,

    #primary {
    margin: 525px auto;
    width: 950px;
    }

    Is that kosher? It seems to be an ugly workaround. Though, I’m not complaining.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    12 years, 10 months ago

    You can keep the clear both, but add relative position and use top positioning:

    #main {
 clear: both;
 position: relative;
 top: -40px;
}

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Downsides of margin: auto’ is closed to new replies.