Understanding parsing of style in html markup

Question

I'm using Firefox 25.0.1. I'm trying to understand, why div block defined by

<div style="position: absolute; margin: auto; width: 240px; height: 75px; top:0; left:0;right:0; bottom:0;">
    some content
</div>

will be located at the center of the browser's window. But the following

<div style="position: absolute; margin: auto; width: 240px; height: 75px;">
    some content
</div>

will be located at the top-left of browser window. The following two div blocks

<div style="position: absolute; margin: auto; width: 240px; height: 75px; left: 0; right:0;">
    some content
</div>

and

<div style="position: absolute; margin: 0 auto; width: 240px; height: 75px;">
    some content
</div>

have center-horizontal alignment only, but

<div style="position: absolute; margin: auto; width: 240px; height: 75px; left: 0;">
    some content
</div>

located at the left-top of browser. I'm confused, I'm dont understand, how corresponding HTML code is parsing. Please explain me how it works.

go through: http://stackoverflow.com/questions/4457790/difference-between-style-positionabsolute-and-style-positionrelative — Johny T Koshy, Dec 04 '13 at 12:36
I want to know why it is neccesary to define explicit `left/right/width` properties for horizotal centering with `margin:0 auto`? Why it doesnt work otherwise? — , Dec 04 '13 at 14:22

score 0 · Answer 1 · edited Dec 04 '13 at 12:59

You would use position absolute on an element that has a parent using position:relative;

Using left, right, top or bottom will position that element that many pixels from the parent element.

If you had this example, it would position the inner div 10px from the top of the parent and 0px from the left

<div style="position:relative">
    <div style="position: absolute; width: 240px; height: 75px; left: 0; top:10px">
        some content
    </div>
</div>

Understanding parsing of style in html markup

1 Answers1