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

4. juni 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">
        <div class="col1">           
        <div class="col2">           
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)
                display: none;
                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.
            transition: padding 0.5s;
            transition: left 0.5s; 
Now in a media query we change both the padding and left.
        @media screen and (max-width: 700px)
                left: -200px;
                padding-left: 0;
The final demo is here
I hope this is off some use to you!


Burton Haynes 4-9-2013 03:33:32 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 11-9-2013 05:01:55 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.. 15-9-2013 13:04:45 United States #

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 17-9-2013 17:33:19 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 8-10-2013 21:57:03 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 3-11-2013 04:45:58 United States #
Handmade Jewelry

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

Handmade Jewelry 6-11-2013 06:37:42 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 6-11-2013 08:16:31 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 04:54:19 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 12-11-2013 07:58:19 United States #

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 12-11-2013 15:37:12 United States #
Lance Wuori

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

Sheree Teichmiller 13-11-2013 05:13:19 United States #
Sheree Teichmiller

Widest selection of VPN Services:

Lazaro Juckett 16-11-2013 11:06:28 United States #
Lazaro Juckett

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

Judith Scheibe 20-11-2013 21:22:30 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 30-11-2013 22:03:09 United States #

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 6-12-2013 00:16:47 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 7-12-2013 20:08:09 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 18:33:06 United States #

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 17-12-2013 03:48:41 United States #
Doyle Rippelmeyer

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

att uverse coupons 20-12-2013 03:10:21 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 24-12-2013 05:28:09 United States #

Useful stuff a joy to have found it

Joanna 24-12-2013 07:56:49 United States #

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

injury attorney austin 1-1-2014 20:41:27 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. 12-1-2014 03:41:42 United States #

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

E liquid 2-2-2014 00:09:29 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 3-2-2014 06:16:22 United States #

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 6-2-2014 06:53:06 United States #

Useful stuff a joy to have found it

Katelyn 25-2-2014 07:54:17 United States #

Always great to see goo information that I can use.

Leisha 1-3-2014 05:39:34 United States #

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

Twyla 2-3-2014 04:15:04 United States #

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

click here to read 2-3-2014 04:57:38 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 22:31:09 United States #

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

whitening toothpaste 8-3-2014 15:51:36 United States #
whitening toothpaste

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

full report 12-3-2014 08:24:35 United States #
full report

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

teeth whitening 23-3-2014 03:50:50 United States #
teeth whitening

Keep the posts coming it was helpful

Jeanette 2-4-2014 12:39:36 United States #

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

Chasity 9-4-2014 21:25:27 United States #

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

Brian 10-4-2014 18:17:23 United States #

Very nice, thanks for the post.

Brian 10-4-2014 20:42:46 United States #

Very nice, thanks for the post.

hemorroide interne 2-5-2014 00:23:28 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. 6-5-2014 14:13:59 United States #

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

news 15-5-2014 17:41:48 United States #

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 17-5-2014 05:23:17 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 3-6-2014 09:05:09 United States #
talks about it

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

bromley estate 4-6-2014 00:19:48 United States #
bromley estate

Always wonderful to see goo information that I can utilize.

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

Due to the fact I in the beginning wrote relating to MBT sneakers at <strong><a href=""; 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 15-7-2014 08:37:34 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 22-7-2014 16:15:40 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 25-7-2014 19:37:45 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 26-7-2014 00:33:59 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 16-4-2015 19:25:30 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 29-4-2015 04:29:51 United States #
Dropbox Tips Tricks

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

��C 15-5-2015 18:31:15 United States #

Super site

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

I can't subscribe to your channel

Janee Clarence - HR Sofwtare 24-5-2015 07:52:04 United States #
Janee Clarence - HR Sofwtare

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

zero export 23-7-2015 12:50:06 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 26-7-2015 11:54:56 United States #
clicking here

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

Job Salary 30-7-2015 02:56:54 United States #
Job Salary

[...] Pingback [...]

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

[...] Backlink [...]