Flexible containers

Content on the web is very different from printed content. When there is media in print form such as a newspaper or book, everyone is going to be reading the same newspaper or book the same way - it's going to be the same width and height no matter who looks at it. The web is different, a webpage will look different for different people depending on things like screen resolution.

How can we adjust to the flexible nature of the way webpages are presented?

By making our containers flexible.

We will set the width of our containers using percentages. This will make their size relative to the container they are within.

A fixed size container:
div.contentFixedSize {border: gray solid 1px; width: 500px;} <div class="contentFixedSize"> This container will have the same width on all screen resolutions </div>
What it will look like:
This container will have the same width on all screen resolutions

The above container has a fixed size. We set its width to 500px and it will be 500px on all screen resolutions. Now let's create a flexible container...

A flexible container:
div.contentFlexible {border: gray solid 1px; width: 80%;} <div class="contentFlexible"> This container will have a flexible width on all screen resolutions </div>
What it will look like:
This container will have a flexible width on all screen resolutions

The above container has a flexible size. It's width will always be 80% of the width of the container it is within on all screen resolutions.

Try it out...

If you are using Windows, right click on the Desktop -> Go to Properties -> Click on the Settings tab -> You will see the option to change screen resolution at the lower left. When you change the screen resolution, notice how the container in the first example (fixed size) remains the same width while the container in the second example (flexible size) stretches to always be 80% width of the container that it is within.

Play around with this to see how different websites (including your own) look in different screen resolutions.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information