Html css

How To Make A Square In Css

Posted by Weston Ganger on July 08, 2014

If you want to make a square in css, you can do the following.

The HTML:


<div class="square">
  <div class="innerContainer">
  </div>
</div>

The CSS:


.square{
  width:75%;
  padding-bottom:75%;
  position: relative;
}
.innerContainer{
  position: absolute;
}

The width and padding-bottom must be equal and provide the square and do not have to be in % it can be in pixels or whatever, but the padding-bottom makes for height equal to width.

The absolute position on innerContainer is what makes it so you can add text or stuff inside the square without making the square taller or bigger.


Posted in HTML / CSS and Tagged with css 


Need help on your next project or application?

I specialize in Ruby-on-Rails, AngularJS, Javascript, Bootstrap, and Hybrid Mobile Apps with Cordova & Ionic.

Contact Me

Recommended Posts