Creating a three column responsive layout with one fixed and two fluid columns

4. June 2013 20:33 by martijn in css, design, html, responsive

Today I want to give a sample of a way you can create a semi-fluid layout. By semi-fluid I mean some columns in your layout have a fixed size and others work with percentages. This is especially usefull if you are doing responsive design. The finished demo can be found here

 

Html Structure

The basic sample consist of the following html:

 

    <div class="wrapper">
        <aside>           
        </aside>
        <div class="col1">           
        </div>
        <div class="col2">           
        </div>
    </div>
 
We have a wrapper div that contains all three columns, we have a aside for our left or right column. In this sample I will place it left. There is a column in the middle taking up 2/3 of the width for our main content. And a column on the right taking up the remaining 1/3. 
 

Positioning with border box and padding

To positions the divs next to other we use a float left and give percentages of 66% and 33%. If we then give a fixed width to the aside you will find that the wrapper is wider than the 100% that 66 + 33 is supposed to be. This is because the width of the aside is not substracted before the percentages are calculated. One way to work-around this is by using the border-box css property and some padding on our wrapper div. By setting a padding-left on the wrapper we create a space of absolute position which is not included in our 100% when we use 'border-box' sizing on our wrapper. To read more about 'border-box' I recommend the post by Paul Irish on this topic Now we have a empty padding space we can move in the aside by giving that an absolute position of 0,0 and a relative position on the wrapper. That way the aside is always in the top left corner of the wrapper. See this first step here
 

Adding some responsiveness

In a responsive design you might want remove the aside and replace it with a toggle menu or some other element. Removing the aside is easy : all we have to is set its display to none and remove the padding from the wrapper so our remaining columns can take the full 100%. We do this when the screen gets below a certain width in a media query :
        
        @media screen and (max-width: 700px)
        {
            aside
            {
                display: none;
            }
 
            .wrapper
            {
                padding-left: 0;
            }
        }
 
When we use an even smaller device we might even prefer a single colum layout. In order to do this we simply give our columns the full 100% width below some screen width in a another media query:
 
        @media screen and (max-width: 500px)
        {
            .col1, .col2
            {
                width: 100%;
            }          
        }
 
This step can be seen here

Adding some fancyness

To really top it off we might want to animate the removal the side bar by sliding it off to the left. This is easy to do with a CSS transition. Support for this is still limited though now (no IE9 but IE10 is OK) so i would stick with a jQuery sollution for production environments. To slide we animate both the 'padding of the wrapper and the left property of the aside. The aside moves of the screen as the padding gets smaller creating a nice effect.
        .wrapper
        {
            transition: padding 0.5s;
        }
 
        aside
        {
            transition: left 0.5s; 
        }
 
Now in a media query we change both the padding and left.
        @media screen and (max-width: 700px)
        {
            aside
            {
                left: -200px;
                
            }
 
            .wrapper
            {
                padding-left: 0;
            }
        }
 
The final demo is here
I hope this is off some use to you!

 

Burton Haynes 9/4/2013 3:33:32 AM United States #
Burton Haynes

I simply want to say I am very new to blogs and truly savored you're blog site. Very likely I�m planning to bookmark your site . You actually have great posts. Regards for sharing with us your web-site.

Maris Barde 9/11/2013 5:01:55 AM United States #
Maris Barde

Whats awake. Very cool site!! Man .. Beautiful .. Amazing .. I'll bookmark your blog and take the feeds additionally...I'm joyful to find numerous cooperative communication right now in the article. Gratitude for sharing..

differenthaircolorss.com 9/15/2013 1:04:45 PM United States #
differenthaircolorss.com

Sorry for the huge review, but I'm really loving the new Zune, and hope this, as well as the excellent reviews some other people have written, will help you decide if it's the right choice for you.

pakaian muslim wanita ukuran besar 9/17/2013 5:33:19 PM United States #
pakaian muslim wanita ukuran besar

Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! However, how can we communicate?

Handmade Jewelry 10/8/2013 9:57:03 PM United States #
Handmade Jewelry

you're in reality a excellent webmaster. The internet site loading pace is incredible. It seems that you’re performing any distinctive trick. Also, The contents are masterpiece. you might have performed a fantastic task on this topic!

Handmade Jewelry 11/3/2013 4:45:58 AM United States #
Handmade Jewelry

quite good post, i undoubtedly enjoy this fabulous internet site, persist with it

Handmade Jewelry 11/6/2013 6:37:42 AM United States #
Handmade Jewelry

I just wanted to let you know how much my partner and i appreciate anything you’ve discussed to help improve the lives of men and ladies in this subject matter. Through your current articles, I have gone via just a newcomer to a skilled in the region. It is truly a gratitude to your great work. Thanks Nobel Calling Cards

Handmade Jewelry 11/6/2013 8:16:31 AM United States #
Handmade Jewelry

Thank you, I’ve recently been looking for info about this subject for ages and yours may be the greatest I’ve located out so far. But, what in regards towards the bottom line? Are you certain concerning the supply?

Handmade Jewelry 11/11/2013 4:54:19 AM United States #
Handmade Jewelry

You’d outstanding guidelines there. I did a search about the field and identified that extremely likely the majority will agree with your web page.

Website 11/12/2013 7:58:19 AM United States #
Website

Hello there good friend, I just wanted to inform you how much your blog was actually important to me. I was able to take the knowledge that you so generously created and also try it. Your page posting genuinely assisted me and i also want to inform your dedicated audience they genuinely have someone that has their head straight. Thanks a lot once more for a fantastic article. I've bookmarked this on my favorite on-line bookmarking web-site and i also advise everybody else do the very same.

Lance Wuori 11/12/2013 3:37:12 PM United States #
Lance Wuori

Im very happy to hear this. This is really nice .

Sheree Teichmiller 11/13/2013 5:13:19 AM United States #
Sheree Teichmiller

Widest selection of VPN Services: www.intl-alliance.com/.../index.php

Lazaro Juckett 11/16/2013 11:06:28 AM United States #
Lazaro Juckett

proudly owning a really grassroots web page seriously isn't easy figured i'd interact in

Judith Scheibe 11/20/2013 9:22:30 PM United States #
Judith Scheibe

I�d have to check with you here. Which is not something I usually do! I enjoy reading a post that will make people think. Also, thanks for allowing me to comment!

prev 11/30/2013 10:03:09 PM United States #
prev

F*ckin' amazing issues here. I am very satisfied to peer your article. Thanks so much and i am having a look forward to contact you. Will you please drop me a mail?

letters from Santa 12/6/2013 12:16:47 AM United States #
letters from Santa

I�m not that much of a online reader to be honest but your sites really nice, keep it up! I'll go ahead and bookmark your site to come back in the future. Many thanks

call from Santa 12/7/2013 8:08:09 PM United States #
call from Santa

It's a pity you don't have a donate button! I'd most certainly donate to this outstanding blog! I guess for now i'll settle for bookmarking and adding your RSS feed to my Google account. I look forward to fresh updates and will share this site with my Facebook group. Talk soon!

Libby 12/12/2013 6:33:06 PM United States #
Libby

Great work! This is the type of info that are meant to be shared across the web. Disgrace on the search engines for not positioning this publish upper! Come on over and consult with my site . Thank you =)

Doyle Rippelmeyer 12/17/2013 3:48:41 AM United States #
Doyle Rippelmeyer

since i know that i could be an exceptionally excellent professional as long as

att uverse coupons 12/20/2013 3:10:21 AM United States #
att uverse coupons

It's perfect time to make some plans for the future and it is time to be happy. I've read this post and if I could I desire to suggest you few interesting things or advice. Perhaps you could write next articles referring to this article. I want to read even more things about it!

Robbin 12/24/2013 5:28:09 AM United States #
Robbin

Useful stuff a joy to have found it

Joanna 12/24/2013 7:56:49 AM United States #
Joanna

Love this post, hope to use more of your posts in the future

injury attorney austin 1/1/2014 8:41:27 PM United States #
injury attorney austin

much too outstanding. I basically llike anything you have acquired listed here, absolutely like what you might be stating as well as way by which you say it.

http://www.ringadviser.com 1/12/2014 3:41:42 AM United States #
http://www.ringadviser.com

The details below is first class, I jump I can return once again when I have the time.

E liquid 2/2/2014 12:09:29 AM United States #
E liquid

We inhale this tobacco smoke (enriched with nicotine) and experience that sense of satisfaction. Little do we realize that burning tobacco leaves produces nicotine and a host of other harmful chemicals also. Physicians and researchers are still baffled by the amount of harmful chemicals that can be found within cigarette smoke. Some state it is 400, while others state that the correct count is 4000. Here lies the advantage of using electronic cigarettes.

chat 2/3/2014 6:16:22 AM United States #
chat

I loved as much as you will receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get bought an shakiness over that you wish be delivering the following. unwell unquestionably come more formerly again as exactly the same nearly a lot often inside case you shield this increase.

Taina 2/6/2014 6:53:06 AM United States #
Taina

Useful stuff a joy to have found it

Katelyn 2/25/2014 7:54:17 AM United States #
Katelyn

Always great to see goo information that I can use.

Leisha 3/1/2014 5:39:34 AM United States #
Leisha

Will love to read more from you in the future, keep the good stuff coming.

Twyla 3/2/2014 4:15:04 AM United States #
Twyla

Finding your post was beneficial for me, thanks a lot.

click here to read 3/2/2014 4:57:38 AM United States #
click here to read

I haven't checked in here for some time because I thought it was getting boring, but the last few posts are great quality so I guess I'll add you back to my everyday bloglist. You deserve it my friend Smile

Shantae 3/3/2014 10:31:09 PM United States #
Shantae

I love your presentation, keep writing an providing information like this.

whitening toothpaste 3/8/2014 3:51:36 PM United States #
whitening toothpaste

The post was real good for my research, hopefully I can find more comparable information

full report 3/12/2014 8:24:35 AM United States #
full report

I  reckon  something  genuinely interesting about your  website  so I  saved to favorites .

teeth whitening 3/23/2014 3:50:50 AM United States #
teeth whitening

Keep the posts coming it was helpful

Jeanette 4/2/2014 12:39:36 PM United States #
Jeanette

Really appreciate you sharing this blog post.Thanks Again. Awesome.

Chasity 4/9/2014 9:25:27 PM United States #
Chasity

Nice website, I hope I can go to once more maintain the excellent work.

Brian 4/10/2014 6:17:23 PM United States #
Brian

Very nice, thanks for the post.

Brian 4/10/2014 8:42:46 PM United States #
Brian

Very nice, thanks for the post.

hemorroide interne 5/2/2014 12:23:28 AM United States #
hemorroide interne

Thank you a lot for giving everyone such a wonderful possiblity to check tips from here. It is always so fantastic and stuffed with amusement for me and my office fellow workers to visit your web site at the very least 3 times in a week to learn the fresh issues you will have. And indeed, I'm just at all times satisfied for the mind-boggling tricks served by you. Certain 1 areas in this posting are easily the best I have ever had.

http://www.productos-bancarios.com 5/6/2014 2:13:59 PM United States #
 http://www.productos-bancarios.com

I really like and appreciate your article.Much thanks again. Will read on...

news 5/15/2014 5:41:48 PM United States #
news

Very interesting points  you have mentioned , thanks  for  putting up. "A big man is one who makes us feel bigger when we are with him." by John C. Maxwell.

more help 5/17/2014 5:23:17 AM United States #
more help

But wanna comment  on few general things, The website  layout is perfect, the  articles  is very   great  : D.

talks about it 6/3/2014 9:05:09 AM United States #
talks about it

I like this post, enjoyed this one thanks  for posting .

bromley estate 6/4/2014 12:19:48 AM United States #
bromley estate

Always wonderful to see goo information that I can utilize.

Pantofi Barbatesti 6/18/2014 12:43:45 PM United States #
Pantofi Barbatesti

Due to the fact I in the beginning wrote relating to MBT sneakers at <strong><a href="incaltaminte-mopiel.ro/.../category&path=18_46"; title="Pantofi Barbatesti">Pantofi Barbatesti</a></strong>, a large amount incorporates improved concerning the manufacturer, and the inventor and founder incorporates still left the organization. In between accurate buyers, evaluations of MBT sneakers are Very combined. If on your own're looking at a couple of MBT sneakers, I strongly stimulate by yourself towards additionally go through the responses remaining inside solution in the direction of the immediately after content material, and converse in the direction of your medical professional ahead of carrying any style of shoe that is thus significantly alternate versus what by yourself're applied in direction of, or in direction of deal with any fashion of discomfort or challenge.

aparat na raty 7/15/2014 8:37:34 AM United States #
aparat na raty

Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! By the way, how could we communicate?

Elmer Bardis 7/22/2014 4:15:40 PM United States #
Elmer Bardis

I am really impressed along with your writing abilities as neatly as with the structure on your blog. Is this a paid theme or did you customize it your self? Anyway keep up the excellent quality writing, it is uncommon to look a nice blog like this one today..

Stacee Hachigian 7/25/2014 7:37:45 PM United States #
Stacee Hachigian

Thanks - Enjoyed this post, how can I make is so that I get an email when you publish a fresh update?

Joel Ivrin 7/26/2014 12:33:59 AM United States #
Joel Ivrin

Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! However, how could we communicate?

Daryl Backhuus 4/16/2015 7:25:30 PM United States #
Daryl Backhuus

Wonderful blog! I found it while surfing around on Yahoo News. Do you have any tips on how to get listed in Yahoo News? I've been trying for a while but I never seem to get there! Many thanks

Dropbox Tips Tricks 4/29/2015 4:29:51 AM United States #
Dropbox Tips Tricks

Good info. Lucky me I discovered your blog by accident (stumbleupon). I've book marked it for later!

��C 5/15/2015 6:31:15 PM United States #
��C

Super site

Janee Clarence - HR Sofwtare 5/24/2015 5:09:57 AM United States #
Janee Clarence - HR Sofwtare

I can't subscribe to your channel

Janee Clarence - HR Sofwtare 5/24/2015 7:52:04 AM United States #
Janee Clarence - HR Sofwtare

I have study not one article on your blog. You are a major lad

zero export 7/23/2015 12:50:06 PM United States #
zero export

Passion is what's missing in much of the online content I read these days. Your article contains the optimal combination of writing passion and well-written material and I am impressed.

clicking here 7/26/2015 11:54:56 AM United States #
clicking here

Hey, buddy, I have not figured out how to subscribe

Job Salary 7/30/2015 2:56:54 AM United States #
Job Salary

[...] Pingback [...]

Electromyograph technician salary 7/30/2015 11:43:45 AM United States #
Electromyograph technician salary

[...] Backlink [...]