1

I have a fixed positioned div at the bottom of my web (oriented just for mobiles). Inside I have 5 links, and I would like these links to be perfect squares always but I want to avoid to use any fixed size so I'm trying always to use "%". These squares needs to be always distribute using the full width of the container.

html so simple:

<div class="container">
    <a href="#" class="facebook">                    
    </a>
    <a href="#" class="info">
    </a>
    <a href="#" class="contacto">
    </a>
    <a href="#" class="telefono">
    </a>
    <a href="#" class="galeria">
    </a>
</div>

and my css's so far:

.container {
    width:90%;        
    height:20%;
    position:fixed;
    bottom:5%;
    left:5%;
    overflow:hidden;
}
.container a {
    width: 18.4%;
    margin-right: 2%;
    height:100%;
    background-color: blue;
    float:left;

}
.container a:last-child {margin-right: 0;}

Here you have the jsfiddle: http://jsfiddle.net/7jJsf/3/

So, could it be possible to make the links perfect squares whatever width or height the browser have?

or, if maybe my aproach is not good enough, any other way to make it?

note: I think I could do it probably using a square img inside every link but I would love to avoid the use of innecesary images.

thanks in advance and excuse my english, hope the question is clear enough.

Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57
  • The bottom answer on this page is very interesting http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout. I tried it on your fiddle and it seems to keep everything square. – TimSPQR Mar 27 '14 at 12:13
  • Ty Tim. very interesting aproachs there. – Alvaro Menéndez Mar 27 '14 at 12:26

3 Answers3

2

I have already answered this issue here. This solution uses a dummy div and position: absolute; to make responsive elements that keep their aspect ratio. This is a CSS solution.

To adapt it to your situation, you can do this :

FIDDLE

HTML :

<div class="container">
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="facebook"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="info"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="contacto"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="telefono"></a>
    </div>
    <div class="wrap">
        <div class="dummy"></div> 
        <a href="#" class="galeria"></a>
    </div>
</div>

CSS :

.container {
    width:90%;
    position:fixed;
    bottom:5%;
    left:5%;
}
.container .wrap {
    float:left;
    position: relative;
    width: 30%;
    margin-right:1%;
    width: 18.4%;
    margin-right: 2%;
    height:100%;
    float:left;
}
.container .dummy {
    margin-top: 100%;
}

.container a {
    display:block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: blue;
}
.container>div:last-child {
    margin-right: 0;
}
Community
  • 1
  • 1
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • Very clever aproach. Good thinking. I think I may use your solution. thanks a lot – Alvaro Menéndez Mar 27 '14 at 12:21
  • Do you think there's a way to do the same but this time the squares positioned from top to bottom at the left of the window?. I tried this: http://jsfiddle.net/7jJsf/29/ but I can't make it work (perfect quares). I make another question about it (maybe I did wrong and should have use this question): http://stackoverflow.com/questions/22759034/responsive-perfect-squares-inside-a-fixed-positioned-div-part-ii/22759898?noredirect=1#22759898 – Alvaro Menéndez Mar 31 '14 at 11:09
  • Done already. another kind user helped me with it with a bit of javascript. in case you interested here is the fiddle: http://jsfiddle.net/7jJsf/33/ – Alvaro Menéndez Mar 31 '14 at 11:55
1

I would set the width and height to the viewport width (a percentage of the viewport width) like this:

width:16vw;
height:16vw;

Your fiddle

Karim AG
  • 2,166
  • 15
  • 29
0

Use this little trick

.container a {
    margin-right: 2%;
    background-color: blue;
    float:left;
    position: relative;
    width: 18.4%;
    padding-bottom: 18.4%;
}
AndrePliz
  • 259
  • 1
  • 2
  • 11
  • Ty, but your solution.. while it may work when decreasing the browser width or increasing browser high... it won't work when increasing browser width or decreasing browser height. thanks anyway – Alvaro Menéndez Mar 27 '14 at 12:18