Problem in pages with size %

Asked

Viewed 77 times

-1

I’m creating a page where I have a page that gives me problems when using IE and Firefox. The page in question has 3 rectangles next to each other with a small space between them.

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

When I decrease the page part of the rectangle is outside 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>
html css google-chrome internet-explorer

  • Also add the HTML you are using. It may help to identify your problem.

  • It needs to be with position: absolute? Knows float?

  • I don’t know. I’ll look up what you do

1 answer

1

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

For example, imagine a page with a style element left: 100px and width: 50%. If you resize it until you get the maximum screen size smaller than 200px, your element will start to get a part off the screen, until it is totally off when the screen size is smaller than 100px.

The solution is to use a relative measure for the left also, or else use @media wanted to remove the left in certain resolutions.

Jsfiddle

  • the solution is to replace the left PX with % ?

  • @Chrisadler It is one of the solutions, but in case your site will be compatible with mobile recommend the use of @media darlings.

  • With mobile I think not. I have to study this function because I don’t know it. But it is strange to work in Google Chrome and not in others. But I’ll soon rectify that situation

  • @Chrisadler I find it strange that it 'works' in Google Chrome =). I added a Jsfiddle to the answer to help understand.

  • http://jsfiddle.net/46saykn1/

  • 1

    I used Left with % and worked perfectly in all Browser’s

Show 1 more comment

Browser other questions tagged html css google-chrome internet-explorer

You are not signed in. Login or sign up in order to post.