Author: Edit Olah

Intrinsic Ratios

Fluid, dynamic element height with padding-top trick

One of the main learning points of building this website was that there are quite a few gems in the basic inner workings of HTML and CSS that can be harnessed. ‘Back to basics!’ could just be the simplest and quickest way to achieve the responsive behaviour you are aiming for.

I came across Thierry Koblentz’s article about 'Creating Intrinsic Ratios for Video', which explains that if you set the padding of a container in a percentage it will set the height of this container to be relative to its on width, thus the intrinsic ratio is set. This will be your parent container.

Then you set up the child container with absolute positioning and 100% width and height, so that it perfectly overlaps the parent container, and it will proportionally resize itself when the width of its parent container changes.

So, all you need is:

The HTML:

The CSS:

.parent {
   position: relative;
   padding-bottom: 31%;
   height: 0;
}
.child {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

I used this for my hero panel and set a background image for the child container. I overlaid some text that stacks underneath the image under a certain width of the screen size.

Here is my codepen example: http://codepen.io/edit-olah/pen/zGyyzG

And the same as a GitHub Gist: https://gist.github.com/edit-olah/1d2030e25e6b0267b6d8

Read more about how I built this website here:
Barefoot in the Park website project – Responsive Web Design

Happy coding!

Related blog posts

  • Font sizing

    Font sizing

    px, em, and rem

    Font sizing is a fundamental topic to get your head around when starting...

    More details >>

  • Avoiding using floats

    Avoiding using floats

    Using inline-block grid and justify instead

    Utilising built-in basic behaviour of HTML and CSS can give you a break...

    More details >>

  • Responsive web design

    Responsive web design

    Basic concepts

    I have been working with websites designed to be responsive since I started...

    More details >>

Contact Edit

Get in touch

If you are interested in hiring me, please drop me an email. I would be happy to send you my up-to-date resume.

Drupal Association member
Image of Edit