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>
