CSS Layout – HTML Component

CSS Layout – HTML Component

<!DOCTYPE html>
<html>
 <head>
  <title>Basic Fixed-width CSS Page Layout Example - resource-centre.net</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <style type="text/css">
  </style>
 </head>
 <body>
  <div class="container">
   <header>
    <big>Example Page Layout With CSS</big>
   </header>
   <nav>
    <a href="#section1">Section 1</a>
    <a href="#section2">Section 2</a>
    <a href="#section3">Section 3</a>
   </nav>
   <article>
    <h1>A Better Approch Than Tables or Frames</h1>
    <p>
     This working file is a <strong>fixed-width layout</strong> made possible through the use of HTML5 tags and CSS3.
    </p>
    <p>
     You can use this instead of tables or frames. Feel free to adapt this as much as you want to make your own website layout.
    </p>
    <hr>
    <h2>Dividing The Page Into Sections</h2>
    <section>
     <div class="thirds">
      <p>
       You can split up your content into columns, but be careful of not exceeding 100%.
      </p>
     </div>
     <div class="thirds">
      <p>
       If you do, you will find one of your intended 'columns' is pushed underneath the others.
      </p>
     </div>
     <div class="thirds last">
      <p>
       This may take some tweaking of the <strong>width</strong> and <strong>margin-right</strong> properties.
      </p>
     </div>
    </section>
    <hr>
    <h2>Go Halves</h2>
    <section>
     <div class="halves">
      <p>
       You can equally divide the page into halves. Just bear in mind that your 100% is a total of your
       column width percentages and your margin percentages.
      </p>
      <p>
       We have used a <strong>.last</strong> class to ensure there is no <strong>margin-right</strong> on the final column so it sits flush to the right of our site.
      </p>
     </div>
     <div class="halves last">
      When in doubt, do the maths.<br>
      <ul>
       <li>2 Columns at 49% = 98%</li>
       <li>Add one margin right at 1%. Total is now 99%;</li>
       <li>This means for 50% width in this case you should have done: (100% - 1%) divided by 2 = 49.5%</li>
      </ul>
     </div>
    </section>
   </article>
   <footer>
    Example Code Courtesy of <a href="https://resource-centre.net" title="The Free Tutorial Centre">The Free Tutorial Centre</a>
   </footer>
  </div>
 </body>
</html>
Comments are closed.