Designing elastic layouts with CSS

-

This is a crash course on making easy-to-manage elastic layouts. But before I get into making elastic layouts, I want to cover the prerequisite question: Why elastic layouts?

Put simply, the elastic layout maintains the benefits of both the fixed and fluid layouts. An elastic layout makes good use of screen real estate, but stops zooming in after a certain point.

But this post isn't just about making elastic layouts - it is about making easy-to-manage elastic layouts, so we will be covering PHP includes and responsive layouts as well.

Constructing a basic elastic layout

You should be aware that in a fluid/elastic layout, the widths of the content divs are set in percentages. This is to accommodate all screen sizes, rather than only taking up, say, 760px in the very middle of the user's screen.

Fonts, on the other hand, are sized with ems. The em is a scalable measurement, just like the percentage, which derives its size off of the user's set default font size. The two measurements we usually stay away from are pt and px.

As usual, we start out document with an HTML5 doctype, in addition to a standard meta tag.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

We'll get back to the head tag when we set CSS styles. But for now, we set the title of the page, close the head, and open the body tag.

<title>Elastic</title>
</head>
<body>

Now I have the contents of my body - a navbar, content div, sidebar, and footer. This is a common setup.


This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content
</body> </html>

And that is the structure of our document. We make use of HTML5 layout tags such as nav, main and footer. We want the sidebar and main content to be side by side. This is why we put them inside of a wrapper div.

Now let's look at the CSS.

nav {
    position: absolute;
    width: 100%;
    top: 0px;
    text-align: center;
    height: 100px;
    left: 0px;
    line-height: 100px;
}

#wrapper {
    width: 60%;
    margin: 0 auto;
    margin-top: 100px;
    max-width: 1600px;
    height: auto;
}

main {
    width: 56%;
    float: left;
    padding: 2%;
}

#sidebar {
    width: 36%;
    float: right;
    padding: 2%;
}

So we set the nav element as absolutely positioned so it doesn't disturb the position of anything else. We actually make a fixed-elastic layout; the navbar is a hardcoded height. We set the height as 100px and the line-height as 100px as well to vertically center the text. To reset the browser's default values, we set left and top to 0px.

The wrapper is set to 60% of the width of the screen. We horizontally center the div with margin:0 auto and lower the div with margin-top. To make the layout elastic, we set a max-width of 1600px. When we zoom out, there will be a point where the wrapper no longer takes up 60% of the screen.

Now we just set our main content and sidebar. To make them side by side, we set main to float:right and we make sure that the paddings and widths add up to 100%. The float:right on the sidebar doesn't actually change anything, since the two divs take up exactly 100% of the wrapper div.

Now we have a basic elastic design.

Responsiveness

When users zoom too far in or a screen is too small, it is likely that a sidebar need not be shown. The main content can then expand to take up 100% of the wrapper div. This is accomplished through media queries. Along with our CSS, we add:

@media only screen and (max-width: 800px) {
    #wrapper {
        min-width: 400px;
    }

    #sidebar {
        display: none;
    }

    main {
        width: 100%;
    };
}

Now we want to set a minimum width on the wrapper, since users may zoom in too far. This only kicks in once the screen size is less than or equal to 800px. We hide the sidebar and make the main tag expand to 100%.

You also likely want all mobile users to be appropriately zoomed. We can accomplish this by adding another meta tag to the head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This ensures that 1px on a phone is equal to 1px on your layout. Phones often automatically assume that your layout is not responsive - they don't want to have to force your site in a 400px box. You can also choose to set the width to an arbitrary px number.

Cleaning up with PHP includes

Notice that our navbar, sidebar, and footer will likely be the same across every page on our site. Thus, you might consider putting these parts in external files and including them with PHP. To include a layout, use the include function in PHP. This whittles the code on each page to something like this:

<?include("header_layout.php");?>
<title>Elastic</title>
<meta name="description" content="This is a description, likely around 160 characters.">
<meta name="keywords" content="some, relevant, keywords">
<?include("body_layout.php");?>
This is some content This is some content This is some content This is some content This is some content
This is some content This is some content This is some content This is some content 
This is some content This is some content This is some content This is some content 
This is some content This is some content This is some content This is some content 
This is some content This is some content This is some content This is some content 
<?include("footer_layout.php");?>

Each PHP file will only contain the text that we omitted.

Finishing up

Once we're really satisfied with our layout we can put it in an external stylesheet and link to it in the head like so:

<link type="text/css" rel="stylesheet" href="https://www.apptic.me/blog/css/main-content.css">

Remember that for each new page you make, you still need to set the meta tags for description and keywords, in addition to setting a page title.

This is a fairly primitive responsive design that you can play with; I've put up a working demo. Try zooming in and out as well as adjusting the browser size. Feel free to add to it as you see fit!

Tags: elastic fluid layouts CSS

See also: Simple Facebook PHP SDK 4 tutorial

Back to all posts

Neel Somani

About the Author

Neel Somani, a student at the University of California, Berkeley, is the founder of Apptic LLC. In addition to computer science, he's interested in philosophy and entrepreneurship. You can follow him on LinkedIn and Twitter.

comments powered by Disqus