Problem with pages with size%

Navigation
-1

I'm creating a page where I have a page that gives me problems using IE and Firefox. The page in question has 3 rectangles side by side with a small space between them.

For the size of the rectangle I used: width: 25% .

When I lower the page part of the rectangle gets off the page and just does not happen with Google Chrome.

I leave here the code of the 3 rectangles:

CSS 

 #TituloRec1
    {
        position: absolute;
        left: 100px;
        top: 450px;
    }

#Rectangulo1
    {
        position: absolute;
        left: 100px;
        top: 500px;
        background: #333;
        height: 203px;
        width: 27%;
        border: 1px solid #000;
        Color: #BEBEBE;
    }

#TituloRec2
    {
        position: absolute;
        left: 480px;
        top: 450px;
    }

#Rectangulo2
    {
        position: absolute;
        left: 480px;
        top: 500px;
        background: #333;
        height: 203px;
        width: 27%;
        border: 1px solid #000;
        Color: #BEBEBE;
    }

#TituloRec3
    {
        position: absolute;
        left: 860px;
        top: 450px;
    }

#Rectangulo3
    {
        position: absolute;
        left: 860px;
        top: 500px;
        background: #333;
        height: 203px;
        width: 27%;
        border: 1px solid #000;
        Color: #BEBEBE;
    }

HTML 

<div id="TituloRec1">
    <h3><b>xxxxxxxxxx :</b></h3>
</div>
<div id="Rectangulo1">  
    <h3>&nbsp;xxxxxxxxxxxxxxxxx:</h3>

    &nbsp;  <a href="documentos/xxxx.pdf" target="_blank"> Visualizar  </a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <a href="\Documentos\teste.pdf" download="teste.pdf">Download</a>
    <br>

    <h3>&nbsp;xxxxxxxx:</h3>

    &nbsp; <a href="documentos/teste.pdf" target="_blank"> Visualizar  </a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="C:\Users\user\Desktop\Exemplo Final\Documentos\teste.pdf" download="teste.pdf">Download</a>
</div>


<div id="TituloRec2">  
    <h3><b>&nbsp;xxxxxxxxxxxx :</b></h3>
</div>                      
<div id="Rectangulo2">
    <h3>&nbspxxxxxxxxxxx:</h3>

    &nbsp; <a href="documentos/teste.pdf" target="_blank"> Visualizar  </a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="\Documentos\teste.pdf" download="teste.pdf">Download</a>
    <br>

    <h3>xxxxxxxxxxxx:</h3>

    &nbsp; <a href="documentos/teste.pdf" target="_blank"> Visualizar  </a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="C:\Users\user\Desktop\Exemplo Final\Documentos\teste.pdf" download="teste.pdf">Download</a>
</div>
<div id="TituloRec3">  
    <h3><b>xxxxxxx:</b></h3>
</div>                      
<div id="Rectangulo3">
    <h3>&nbsp;xxxxxxxx:</h3>

    &nbsp; <a href="documentos/teste.pdf" target="_blank"> Visualizar  </a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="\Documentos\teste.pdf" download="teste.pdf">Download</a>
    <br>

    <h3>&nbsp;xxxxxxxxx:</h3>

    &nbsp; <a href="documentos/teste.pdf" target="_blank"> Visualizar  </a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="C:\Users\user\Desktop\Exemplo Final\Documentos\teste.pdf" download="teste.pdf">Download</a>
</div>
    
asked by anonymous 21.01.2015 / 18:15

1 answer

1

The problem is that you have the property left with a fixed value.

For example, imagine a page with an element with left: 100px and width: 50% styles. If you resize it until you have the maximum screen size less than% w / o, your element will start to get away from the screen until it is completely out when the screen size is less than% w / o. / p>

The solution is to use a relative measure for 200px as well, or use 100px queries to remove left at certain resolutions.

JSFiddle

    
21.01.2015 / 18:32
Any explanation for this SQL? How to "set" a Query in the @Entity annotation with Hibernate?