100% width, filling and absolute positioning

Question

I tried to make a div fill a specific part of the screen, leaving 412px blank both on the left and on the right. Easy as well ??

Now, when I add the position: absolute and top: 0, the padding disappears. The inspector of the elements shows that it is empty - the "gaskets" remain, but the width: 100% disappears. I used this code (without 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 to animate it later) while maintaining the addition? I would really like your help. Thanks in advance!

Answer 1

Perhaps it?

 <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 left and right properties 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

change

alternative, if you need to use registration badly, you can set left:0; right:0; left:0; right:0; , and then use the existing paddings.

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