Rubber Layouts – Combining Static and Fluid Layouts

Categories → Popular,Web Design

Many web pages knowadays are using fluid layouts. While these are very useful, they do have some minuses. Imagine trying to read a fluid layout on your phone – It’s impossible. The sidebar would be maybe 50px wide, and the main layout would be maybe 250px. Another problem is with really wide screens – the layout fills up almost the whole screen, which results in a horrible reading experience.

Today, I’ll show you how to take the best of two worlds: static layouts and fluid layouts. We’ll call this a rubber layout.

Let me explain how everything will work. There are going to be 4 stages for the layout.
First, there’s going to be a container of 1000px wide.
Second, using media queries, we’ll change the width of the container to 720px when the user’s browser is 999px wide.
Thirdly, once the user’s browser is 719px wide, we’ll change the main container to have a width of 100%, so everything fits right in the browser.
The fourth and final stage will make everything inside the container have an equal width. This change will happen at 479px.

Sound confusing? Just take a look at the demo and resize your browser.

Rubber Layout Demo & Source Files

View the DemoDownload the Source Files

Screenshot

Stage 1 – The HTML & CSS

The HTML

First off, we’ll have to code an extremely simple layout. There’s going to be a header, a main content div, and a sidebar.

<div id="container">

	<h1 id="header">Rubber</h1>

	<div id="main">

	</div>

	<div id="sidebar">

	</div>

</div>

That’s it for the HTML.

The CSS

Great, we’re at the fun part. We’ll start off by defining a default set of widths for everything.

#container {
width: 1000px;
margin: 0 auto;
background: #52a0ff;
}

#header {
font-size: 50px;
margin-top: 50px;
float: left;
width: 98%;
margin-left: 1%;
margin-right: 1%;
}

#main{
background: #eeeeee;
float: left;
width: 68%;
margin-left: 1%;
margin-right: 1%;
height: 1000px;
}

#sidebar{
background: #dddddd;
float: left;
width: 28%;
margin-left: 1%;
margin-right: 1%;
height: 1000px;
}

Notice the widths of the header, main, and sidebar elements. They are in percentages for a reason. More about this later.

Stage 2

In stage 2, the container will change to 720px wide.

@media screen and (max-width: 999px) {
#container {
width: 720px;
}
}

As you can see, we aren’t redefining the widths of the header, main, and sidebar elements, because they automatically scale to fit into their new size container. That’s part of the beauty of rubber layouts.

Stage 3

When the user’s browser is 719px wide, the layout changes, and the container becomes fluid.

@media screen and (max-width: 719px) {
#container {
width: 100%;
}
}

Now, when the user resizes their browser, the layout resizes with them as well. This is useful for tablets and small laptops.

Stage 4

When the user’s browser hits 479px, all of the elements will become the same size. This solves the problem with iPhones and Androids and such.

@media screen and (max-width: 479px) {
#header {
width: 98%;
}

#main {
width: 98%;
}

#sidebar {
width: 98%;
}
}

Conclusion

That’s it! We’ve got a fully functional rubber layout, with 4 stages depending on browser sizes. Widescreen, small screens, smaller screens, and handheld devices.

If you like the way rubber layouts work, there’s a grid system just waiting for you: BluCSS.

You might also like…

How to Build a Fully Functional CSS3-Only Content Slider →
Resize Images in a Post with jQuery, and turn it into a plugin →
Getting Started with WordPress Shortcodes (+Examples) →

About the Author: Alexandre Smirnov (6 Articles)

Alexandre Smirnov is a web developer and designer who lives and works in California. He enjoys creating cool new stuff out of CSS3 and HTML5, and is convinced that Jquery is the meaning of life. He also regularly writes on his blog, DesignLunatic.com.

Comments and Reactions

Partners