100％宽度，填充和绝对定位

Question

I was trying to make a div fill a certain part of the screen, leaving 412px empty both to the left and to the right. Easy, eh?

Now, when I add position:absolute & top:0, the fill disappears. The element inspector shows it's empty - the "paddings" stay, but the width:100% disappears. I've used this code (without the positioning):

<div style="height:73px; padding-left:413px; padding-right:413px;">
  <div style="width:100%; height:73px; background:url(top-fill-small.png);">
  </div>
</div>

So, how can I position it absolutely (I need it animated later), while preserving the padding? I'd love your help very much. Thanks in advance!

Answer 1

Perhaps this?

<div style="width:100%; position:absolute; top:0; left:0">
    <div style="height:73px; background:url(top-fill-small.png); margin-left:413px; margin-right:413px"></div>
</div>

Answer 2

from the moment you need to use position:absolute; why not use the properties left & right instead of padding?

html

<div style="height:73px;position:absolute;left:413px;right:413px;"><div style="width:100%; height:73px; background:url(top-fill-small.png);border:1px solid red">Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content </div></div>

Example: http://jsbin.com/anega3

edit

an alternative if you need badly to use padding you can set left:0; right:0; left:0; right:0; and then use the paddings you already have.

html

<div style="height:73px;position:absolute;left:0;right:0px;padding-left:413px;padding-right:413px;"><div style="width:100%; height:73px; background:url(top-fill-small.png);border:1px solid red">Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content Content Content Content Content  Content Content Content Content Content </div></div>

Example: http://jsbin.com/anega3/2