Quantcast
Channel: responsive – WordPress.org Forums
Viewing all articles
Browse latest Browse all 16569

That Guy on "How To Create A Responsive Theme From Scratch"

$
0
0

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:
http://MikeJohnsonDesign.com


Viewing all articles
Browse latest Browse all 16569

Trending Articles