با سلام.
توصیه می شود که از فایل W3.CSS که توسط سایت معتبر w3schools.com ارائه شده است، استفاده نمایید :
http://www.w3schools.com/w3css/default.asp
این فایل، علاوه بر اینکه امکان ساخت اینگونه ترکیب ها (تعدادی ستون در کنار هم) را به شما می دهد، ساختار سایت را هم responsive خواهد کرد. یعنی در صفحه نمایش های کوچک (مثل موبایل ها)، ستون ها جابجا می شوند و به جای کنار هم بودن در جهت افقی، یکی به ردیف بعد رفته و عملا در جهت عمودی قرار می گیرند تا کاربر به راحتی محتوای هر دو را ببیند (این ویژگی خیلی مهم است و در نهایت هرکس باید responsive بودن را برای سایت خود رعایت کند).
خود سایت w3schools.com ، راهنماهای زیادی برای استفاده از آن دارد که در همان لینک ذکر شده، موجود می باشند.
راهنما برای طراحی ستون های با اندازه های مختلف (به صورت 2 یا 3 یا 4 ستون و یا ترکیبی از یک دوم و یک سوم و یک چهارم عرض صفحه) :
http://www.w3schools.com/w3css/w3css_responsive.asp
راهنما برای طراحی ستون های با اندازه های مختلف (انعطاف پذیر با بخش پذیری به 12 قسمت و بر اساس سه اندازه صفحه نمایش small و medium و large) :
http://www.w3schools.com/w3css/w3css_grid.asp
مثلا تعریف ستون زیر را ببینید (بر اساس W3.CSS و حالت 12 قسمتی برای عرض صفحه) :
کد پیاچپی:
<div class="w3-col s5 m4 l3">
s مخفف small و m مخفف medium و l مخفف large می باشد. کد بالا یعنی ستون، در صفحه نمایش با اندازه small ، به اندازه 5 قسمت از 12 قسمت کل (کل عرض صفحه)، عرض صفحه نمایش را بپوشاند (اندازه عرض آن برابر پنج دوازدهم از کل عرض صفحه نمایش باشد). برای medium به اندازه 4 قسمت از 12 قسمت و برای large به اندازه 3 قسمت از 12 قسمت (به اعداد در نام کلاس ها توجه کنید).
نکته مهم : در توضیحات بالا، بنده لغت ((صفحه نمایش)) را به کار بردم زیرا فرض کرده ام که عنصری که این ستون را در بر گرفته، کل صفحه نمایش را می پوشاند، در صورتی که صحیح تر این است که بگوییم پنج دوازدهم عرض ((عنصر حاوی این ستون)).