confundido, posicionado a la derecha, el cuerpo más ancho que la ventana?

I've come across an issue that has me dumbstruck... I tried to position an element at the absolute right of the page using css 'right: 0px'. But it seemed my element was actually being placed a few pixels further right than expected and I lose part of it.

In an attempt to hunt down the problem I've simplified my case to the HTML below.

It would seem that an element with width 100% (also the body!) is actually wider than the viewport (but is triggering scollbars). I'm dumbstruck.. What am I overlooking here?

<!DOCTYPE html>
<HTML>
<head>
    <STYLE>

        body{
            overflow: auto;
        }

        #div1{
            position:       absolute;
            top:            50px;
            left:           0px;
            width:          100px;
            height:         145px;
            background-color:   red;
        }

        #div2{
            position:       absolute;
            top:            250px;
            left:           0px;
            width:          100%;
            height:         145px;
            background-color:   red;
        }

        .block{
            position:       absolute;
            width:          30px;
            height:         20px;
            background-color:   yellow;
        }

        .sub0{top:0px; right:0px;}
        .sub1{top:25px; right:1px;}
        .sub2{top:50px; right:2px;}
        .sub3{top:75px; right:3px;}
        .sub4{top:100px; right:4px;}
        .sub5{top:125px; right:5px;}


    </STYLE>

<body>


    <div ID="div1"> 

        <div class="block sub0">0PX</div>
        <div class="block sub1">1PX</div>
        <div class="block sub2">2PX</div>
        <div class="block sub3">3PX</div>
        <div class="block sub4">4PX</div>
        <div class="block sub5">5PX</div>

    </div>

    <div ID="div2"> 

        <div class="block sub0">0PX</div>
        <div class="block sub1">1PX</div>
        <div class="block sub2">2PX</div>
        <div class="block sub3">3PX</div>
        <div class="block sub4">4PX</div>
        <div class="block sub5">5PX</div>

    </div>


</body>

</HTML>

preguntado el 31 de julio de 12 a las 13:07

I fiddled it, jsfiddle.net/d4tkM, and I don't know what your problem is, is it on my fiddle? -

Please provide some more helpful information: what browser are you testing the code in and what browser version is it? -

Why do you need body overflow on, without setting a size? -

Are you speaking about that X being placed outside the yellow container?.. i.e,out of the viewport? -

No on the fiddle the problem does not show, try saving the code as a html file and view it... for me the frist block has the inner blocks starting at the left edge and jumping left 1px each, on the second (100% wide) block I don't see a gap appear until the 4th block). -

1 Respuestas

ok, sorry to have bothered you with this... problem was so silly it makes me want to bang my head against the wall...

After more research problem only seemed to occur on a maximized browser window on the left monitor of my dual monitor setup...

an 'auto-ajust' of the monitor solved it... no longer loosing the right 2 pixels...

DUH!

Respondido 31 Jul 12, 14:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.