How to style a div to be a responsive square?
Works on almost all browsers.
You can try giving padding-bottom
as a percentage.
<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>
The outer div is making a square and inner div contains the content. This solution worked for me many times.
Here's a jsfiddle
To achieve what you are looking for you can use the viewport-percentage length vw
.
Here is a quick example I made on jsfiddle.
HTML:
<div class="square">
<h1>This is a Square</h1>
</div>
CSS:
.square {
background: #000;
width: 50vw;
height: 50vw;
}
.square h1 {
color: #fff;
}
I am sure there are many other ways to do this but this way seemed the best to me.
HTML
<div class='square-box'>
<div class='square-content'>
<h3>test</h3>
</div>
</div>
CSS
.square-box{
position: relative;
width: 50%;
overflow: hidden;
background: #4679BD;
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
text-align: center;
}
http://jsfiddle.net/38Tnx/1425/