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.


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

The CSS:

  position: relative;
  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 

Want me to help develop your next project or application?

Contact Us

Specializing in Ruby-on-Rails, Javascript, Multi-Platform Electron Desktop Apps and Hybrid Cordova Mobile Apps.

Recommended Posts