How to Create a Flexible Layout

To demonstrate a flexible layout and how it’s built, we’ll take an existing web page and make it flexible. 

In the tutorial below, we’ll take a HTML5 Two Column Layout and turn the web page into a flexible layout. This is the first step to making a layout responsive.

Demo page: http://www.everythingaboutweb.com/classes/examples/html5-two-column-style-flexible/

But first,

What does it take to create a responsive design?

Three core ingredients:

1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

Flexible images

img {
max-width: 100%;
}

The max-width: 100%

the max-width: 100% rule can also apply to most fixed-width elements, like video and other rich media

img,
embed,
object,
video {
max-width: 100%;
}

Media queries

And, the last step is adding media queries. We’ll cover this in Part 2.

Make it Flexible

1. Change all font sizes to ems

target ÷ context = result

By default, 16px = 1em

For example: 24px ÷ 16px = 1.5em

2. Change the width of all divs to percentages

960px = 90%

target ÷ context = result

#wrapper { 
width: 90%;
background-color: #FFF;
margin-left:auto;
margin-right:auto;
}

nav {
width:100%;
}

Content div
For example: 580 ÷ 960 = result

#content {
width: 60.416666%; /* 580 / 960 */
}

#rightcol {
width: 27.083333%; /* 260 / 960 */
}

3. Add flexible margins and padding to all divs

target ÷ context = result

When setting flexible margins and padding on an element, your context is the width of the element’s container.

#content {
width: 60.416666%; /* 580 / 960 */  
float: left; 
padding-left:  4.166666666667%;   /* 40 / 960 */
padding-right: 4.166666666667%;   /* 40 / 960 */
padding-bottom: 20px;    
}

#content h1{
font-size: 1.5em;  /* 24px; */
padding-top: 25px;
}

#content h2 {
font-size: 1.125em;   /* 18px;  */   
padding-top: 25px;
font-weight: 200;
}

#content p{
font-size: .75em;  /* 12px;  */    
padding-top:15px;
line-height:16px;    
}

#rightcol {
width: 27.083333%; /* 260 / 960 */
float: left;
padding-left: 4.166666666667%;   /* 40 / 960 */
}

#rightcol h2 {
font-size: 1.125em;   /* 18px;  */
padding-top: 25px;
font-weight: 400;
}

#rightcol h3 {
font-size: 1em;  /* 16px;  */
padding-top: 25px;
font-weight: 200;
}

#rightcol p {
font-size: .75em;  /* 12px;  */    
}

footer {
clear:both;
}

footer p {
font-size: .6875em;  /* 11px;  */    
color:#333;    
padding-left: 4.166666666667%;   /* 40 / 960 */
}

footer a {
color:#333;
text-decoration:none;
}

nav ul li a {
font-size: 1em;
padding: 10px 1.666666666667%; /* 16 / 960 */
background-color: #209a9b;
color: #FFF;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}