Why left padding does not work?

Question

I was expecting the following will place inner (red) square at position 50,50 in browser window coordinate frame. But it didn't. Why?

<body> <div style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: yellow; padding: 50px;"> <div style="position: absolute; left: 0px; right: 0px; width: 64px; height: 64px; background-color: red"> </div> </div> </body>

SORRY MY FAULT

I was wishing to make "top:0px" for inner DIV but wrote "right:0px" instead. Just a mistake.

This is a rather.... peculiar.... way of doing things. Could you please tell us why are you using position: fixed and position: absolute in that way? There may be a better solution for what you're trying to accomplish. — Madara's Ghost
– Madara's Ghost, Commented Dec 24, 2011 at 17:10
Do you want the red square stays at that position upon scrolling? I wasn't sure what you meant by "browser window coordinate frame." — moey
– moey, Commented Dec 24, 2011 at 17:16
Please post and accept your own answer if you feel like you've solved this question. — Wex
– Wex, Commented Dec 24, 2011 at 17:21

TotalNFL · Accepted Answer · 2016-07-22 02:38:47Z

3

position: absolute; takes your element out of the normal flow. Since you specify it's left as 0, that's where it will be.

edited Jul 22, 2016 at 2:38

TotalNFL

231 silver badge8 bronze badges

answered Dec 24, 2011 at 17:09

Erik Funkenbusch

93.7k29 gold badges201 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dims Over a year ago

so why it doesn't do the same with top?

ZagNut · Accepted Answer · 2011-12-24 17:08:25Z

your inner div's position is absolute. try relative, or not setting that attribute at all.

Madara's Ghost · Accepted Answer · 2011-12-24 17:09:58Z

Well, it's because you position: absolute it to have left: 0; You likely want something like so:

<body> <div style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: yellow; padding: 50px;"> <div style="position: absolute; left: 50px; right: 0px; width: 64px; height: 64px; background-color: red"> </div> </div> </body>

Telmo Marques · Accepted Answer · 2011-12-24 17:11:38Z

Because of position: absolute; on the red square.

You can take it out and get this, or set the left property and get this.

Also, as a side note, some people suggest (myself included) to don't attach a measurement unit to a CSS property when the value is 0. Zero of something is still zero, so 0px, 0em, etc, doesn't matter, it always evaluates to 0.

Vigrond · Accepted Answer · 2011-12-24 17:12:06Z

the left right top and bottom css means 'distance from'. It's not meant to be used the way you are using it.

Here's a better example: http://jsfiddle.net/xAuLJ/

<body> <div style="position: fixed; width:100%; height:100%; background-color: yellow;"> <div style="position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin-top:-32px; margin-left:-32px; background-color: red"> </div> </div> </body>

Dims · Accepted Answer · 2011-12-24 17:32:00Z

It was my own fault. I was wishing to make "top:0px" for inner DIV but wrote "right:0px" instead. When element moved down but not right I decided top padding processed differently than left.

Probably best to incorporate this into your question rather than creating a new answer.

Collectives™ on Stack Overflow

Why left padding does not work?

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Related