Height equal to dynamic width (CSS fluid layout)

Question

Is it possible to set the same height as the width (ratio 1:1)?

Example

+----------+

| body     |

| 1:3      |

|          |

| +------+ |

| | div  | |

| | 1:1  | |

| +------+ |

|          |

|          |

|          |

|          |

|          |

+----------+

CSS

div {

  width: 80%;

  height: same-as-width

}

Answer 1

Try using the code given below:

In HTML:

<div id="container">

    <div id="dummy"></div>

    <div id="element">

        some text

    </div>

</div>

 In CSS:

#container {

    display: inline-block;

    position: relative;

    width: 50%;

}

#dummy {

    margin-top: 75%; /* 4:3 aspect ratio */

}

#element {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: silver /* show me! */

}