How To Create A Responsive Theme From Scratch

This looks like a nice tutorial:

Developing WordPress Themes Using Responsive Frameworks

Simple yet very effective:
HTML

<div id="wrapper">
   <div id="header">
      <h1>Your Site Title</h1>
   </div><!-- end header -->
   <div id="main">
      <div id="content">
         <h2>Your Content Title</h2>
         <p>Your content blah blah...</p>
      </div><!-- end header -->
      <div id="sidebar">
         <p>Your sidebar content...</p>
      </div><!-- end sidebar -->
   </div><!-- end main -->
   <div id="footer">
      <p>Your footer content...</p>
   </div><!-- end footer -->
</div><!-- end wrapper -->

CSS

#wrapper {
   max-width: 1200px;
   width: 95%;
   margin: 0 auto;
}

#header, #main, #footer {
   width: 100%;
}

#content {
   width: 65%;
   float: left;
}

#sidebar {
   width: 35%;
   float: left;
}

#footer {
   clear: both;
}

The main thing here is to use the “max-width” and “width” on the wrapper (or whatever did you have wrapping the content).

I’m using this style of coding on my website:
[Signature removed]

Your site doesn’t have to use HTML5 tags to be responsive.

I want to use my exisiting theme responsive. Any idea for good tutorials?