Responsive Square Divs Cross Browser Compatible

The main trick here is to make the div a square.

Normally one set a width, the height to 0 and a padding that equals to the width

.square {  height: 0;  width: 33%;  padding-bottom: 33%;  background: lightgray;}

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

CSS: Why aren't these responsive squares totally square?

The exact calculation should be (14.2857% - 8px - 2px - Lpx) we remove the padding-top and the border and the line-height (not the font-size), so you should know the value of the line-height or you set it:

/* Dirty quick CSS reset */*,*::before,*::after {  margin: 0;  padding: 0;  box-sizing: border-box;}
.container {  display: flex;  flex-flow: column;  flex: 1;  background: aliceblue;}
.row {  display: flex;  flex: 1;}
.square {  border: 1px solid black;      width: 14.2857%; /* 100% / 7 */  font-size: 18px;   line-height:1em; /*equal to font-size*/  padding: 8px;    /* square-width - font-size - padding-top */  padding-bottom: calc(14.2857% - 8px - 2px - 18px);}

<div class="container">  <div class="row">    <div class="square">1</div>    <div class="square">2</div>    <div class="square">3</div>    <div class="square">4</div>    <div class="square">5</div>    <div class="square">6</div>    <div class="square">7</div>  </div></div>

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

Irregular DIV shape, cross browser platform support

Let's make the sloped sidebar with a transform:

The sidebar is given position: fixed and will stay in one place relative to the viewport
The sidebar is given transform: rotate(20deg) to rotate it and create a sloped shape
transform-origin: 100% 0% helps position the sidebars shape where we want it (read more on transform-origin here)
The nav inside the sidebar is given transform: rotate(-20deg) to cancel out the rotation for the text
Max width / height is used to keep the size of the sidebar flexible but not too large or small

Example

html,body {  margin: 0;  background: #EEE;}.sidebar {  height: 200%;  width: 100%;  max-width: 400px;  min-width: 250px;  display: block;  background: #FFF;  transform: rotate(20deg);  transform-origin: 100% 0%;  position: fixed;  left: 0;  top: 0;  border-right: solid 2px #000;  }/*Demo purposes*/
.sidebar > nav {  position: absolute;  top: 100px;  left: 30%;  width: 300px;  transform: rotate(-20deg);}.sidebar > nav > a {  display: block;}.content {  background: #CCC;  text-align: right;}

<div class="sidebar">  <nav>    <a href="#">Link</a>    <a href="#">Link</a>    <a href="#">Link</a>    <a href="#">Link</a>    <a href="#">Link</a>    <a href="#">Link</a>  </nav></div>
<div class="content">  I am covered by the sidebar!</div>

A grid layout with responsive squares

The padding-bottom trick is the most used to accomplish that.

You can combine it with both Flexbox and CSS Grid, and since using percent for margin/padding gives inconsistent result for flex/grid items (on older browser versions, see edit note below), one can add an extra wrapper, or like here, using a pseudo, so the element with percent is not the flex/grid item.

Edit: Note, there's an update made to the specs., that now should give consistent result when used on flex/grid items. Be aware though, the issue still occurs on older versions.

Note, if you will add content to the content element, it need to be position absolute to keep the square's aspect ratio.

Fiddle demo - Flexbox

Edit 2: In a comment I were asked how to have a centered text, so I added that in below snippet.

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;

  display: flex;               /* added for centered text */
  justify-content: center;     /* added for centered text */
  align-items: center;         /* added for centered text */
}

<div class="square-container">

  <div class="square">
    <div class="content">
      <span>Some centered text</span>
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

</div>

Responsive cross browser solution for equal height columns with children

If crossbrowser but not for dinosaurs thne inline-block and a pinch of calc() might help:

* {  box-sizing: border-box;  margin:0;}.parent div div a,.parent div  div {  border: solid 1px;}.parent div.left {  padding: 1em;  border: solid 1px;}.parent div {  display: inline-block;  vertical-align: top;  width: 100%;}.parent {  width: 70%;/* demo purpose, do run it in full page too */  margin: auto;  background:yellow;}img {  width: 100%;  display: block;}.parent .left {  width: 75%;}.parent .right {  width: 25%;}.parent div div a {  margin: 0.88em;  display: block;  text-align: center;  /* if floatting pseudo do  overflow:hidden;*/}.parent div div a:before {  content: '';  padding-top: calc(60% - 0.5em);/* is calc() allowed ?  if not keep 60% and remove margin:1em from links */  /* float:left; or with vertical-align */  display: inline-block;  vertical-align: middle;}

<div class="parent">  <div class="left">    <div class="image-container">      <img class="image" src="http://placehold.it/1300x780" alt="Sample Image" />    </div>  </div><!-- cure white-space disturbance  --><div class="right">    <div class="cta">      <a>LINK #1</a>    </div>    <div class="cta">      <a>LINK #2</a>    </div>    <div class="cta">      <a>LINK #3</a>    </div>  </div></div>

Set a responsive layout for 4 divs that are in a footer. Needs to stay centered on all sides relative the edges of the footer

You have two very simple ways to do that.

If you are targeting modern browsers, then you could make use of the CSS3 flex model. This is the simplest method. You won't have to change anything in your markup. Of course, I would suggest using the footer tag instead of div, because it semantically is a footer.

In this example, I am omitting browser prefixes for two reasons: (1) brevity of this snippet, and (2) most modern browsers now don't need prefixes for this. This example snippet works perfectly as-is in IE-11, FF-34 and GC-39.

The trick is to use the justify-content: space-around; property to distribute the spacing evenly between the divs. Remember, that space-around will cause the space before the first div and space after the last div to be half of the spacing between divs. This will cause, the spacing after the last div to be large because of the size of the div. To mitigate this, use margin: auto.

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

And: http://dev.w3.org/csswg/css-flexbox/#propdef-justify-content

Fiddle: http://jsfiddle.net/abhitalks/j8fpp0so/2/

Snippet:

footer {    background-color: #000; opacity: 0.7;    height: 200px;    display: flex;    justify-content: space-around; /* this is important */    align-items: center; text-align: center;}footer > div {    border: 1px solid red;    width: 100px; height: 100px;    margin: 0 auto; /* this is important */}

<footer> <div></div> <div></div> <div></div> <div></div><footer>

Div Square, width size based on 100% height

Ok here the solution.

<div id="square" style="background-color:black;height:100%">test</div>

$(window).ready(updateWidth);
$(window).resize(updateWidth);

function updateWidth()
{
var square = $('#square');
var size = square.height();

square.css('width',size);
}

http://jsfiddle.net/j372H/7/

Cross-browser SVG in responsive or fluid layout?

You can add these properties to your SVG tag - <svg viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet"> to preserve aspect ratio.

Taken from the article I read that in...

To preserve the aspect ratio of the containing element and ensure that
is scales uniformly, we include the viewbox and preserveAspectRatio
attributes.

The value of the viewbox attribute is a list of four space- or
comma-separated numbers: min-x, min-y, width and height. By defining
the width and height of our viewbox, we define the aspect ratio of the
SVG image. The values we set for the preserveAspectRatio attribute —
300 × 329 — preserve the aspect ratio defined in viewbox.

From this article.

Responsive Square Divs Cross Browser Compatible