Make A Square In Css

Posted By Weston Ganger

<p>If you want to make a square in css, you can do the following.</p>
<p>The HTML:</p>

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

<p>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.</p>
<p>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.</p>

Article Topic:Software Development - HTML / CSS

Date:July 08, 2014