Simple Ii Column Css Responsive Layout

HTML STRUCTURE
Here is a simplified illustration of the HTML.

 <div id="main"> <div class="wrap">                   <div id="primary">                     <div id="content" role="main">                         <p>Article content...</p>                     </div>                 </div>                   <div id="secondary">                     <div class="widget">                         <p>Sidebar content...</p>                     </div>                 </div>               </div>         </div> 

CSS RESET
We'll occupation the CSS reset.

/* =Reset -------------------------------------------------------------- */   * {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box;     margin-top: 0; }   html, body, div{     margin: 0;     padding: 0; }  

SINGLE COLUMN LAYOUT FOR MOBILE
We’ll start amongst but ane column for the mobile layout, amongst the content column coming foremost too the sidebar below it. Before nosotros give-up the ghost to that, lets add together roughly colouring fabric thus nosotros tin country the dissimilar elements apart.

/* =Color -------------------------------------------------------------- */   #header{     background: #cccccc; }   #main{     background: #dddddd;     }   #secondary {     border: 1px enterprise #bbbbbb; } 

The #header is greyness too the #main department is lighter gray. Now let’s movement on to the actual structure.

/* =Structure -------------------------------------------------------------- */   .wrap{     max-width: 1140px;     margin: 0 auto;     padding: 1em; }   .wrap:after {     content: "";     display: table;     clear: both; }   #primary{     max-width: 720px;     margin: 0 auto; }   #secondary{     max-width: 400px;     margin: 0 auto;     padding: 1em; } 

Starting at the beginning, the .wrap divs accept a maximum width of 1140px too are centered on larger devices past times the setting the margin to “0 auto”. The padding is to give-up the ghost along the text from touching the borders of the browser on smaller screens.
The code inward the .wrap:after department is to brand certain each .wrap div contains all floated elements within it, rather than letting the floated elements overlap the edges. This is oft called a “clearfix” hack.
The #primary department sets a maximum width for the primary content column. We don’t always desire a content column getting actually broad because broad columns are to a greater extent than hard to read. Here we’re limiting this column to 720px too centering it using “margin: 0 auto;” for when the enshroud is larger than 720px.
The #secondary department limits the sidebar width to 400px. Sidebar content is rarely intended to live displayed inward a broad area. Since the sidebar volition non live wider than 400px inward the sum 2 column layout, nosotros bound it hither also. This means the sidebar volition appear inward a consistent fashion regardless of the enshroud size. Just similar the other elements, nosotros oculus it using “margin: 0 auto” too and thus hand it a padding of 1em thus the content doesn’t impact the border nosotros gave it earlier.
Here’s what it should hold off similar on mobile.

TWO COLUMN CSS LAYOUT
Here’s where nosotros lastly give-up the ghost to occupation CSS media queries. This is what it looks like:

/* =Media Queries -------------------------------------------------------------- */   @media enshroud too (min-width : 900px) {     #primary{         float: left;         width: 65%;         padding-right: 1em;     }       #secondary{         float: right;         width: 35%;     } } 

First let’s hold off at the @media enshroud line. This occupation determines when the enclosed CSS is applied. In this case, it is applied when the website is beingness displayed on a enshroud that has a width of 900px or more.
The #primary department is floated to the left too given a width of 65%. Then 1em of padding is added on the correct to preclude the enclosed content from touching the sidebar that volition live positioned adjacent to the correct of the primary content.
The #secondary department is floated to the correct too given a width of 35%, thus that it sits adjacent to the #primary section.
Here’s what it looks similar on the desktop.

Finally, if nosotros wanted the sidebar to live on the left too the content on the right, nosotros would solely take away to modify the float directions of the #primary too #secondary columns inward the media query department of the stylesheet too modify “padding-right” to “padding-left” on the #primary div.

/* =Media Queries -------------------------------------------------------------- */   @media enshroud too (min-width : 900px) {     #primary{         float: right;         width: 65%;         padding-left: 1em;     }       #secondary{         float: left;         width: 35%;     } } 

That’s all.If you lot accept whatsoever questions or comments, experience costless to allow me know via the contact page. Thanks! Source: http://themefoundation.com/two-column-css-layout/
Sumber http://developer-paradize.blogspot.com