How to Create a Simple Website with HTML and CSS (TypeC: 3 Column Layout)

How to Create a Simple Website ( TypeC : 3 Column Layout ) with HTML and CSS

Contents

Introduction & Demo
Tips
Sample Code
References

Introduction & Demo

In this video, I’ll show you how to create 3 column layout website!

First, please check the demo page.

There are some ways to create 3 column layout, and I think this is the easiest.

All you need is a text editor.
Hope you enjoy coding 🙂

Tips

clear: both;	Clear floating.
box-sizing: border-box;	Set the width and height include content, border, and padding.

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>The 3 Column Layout</title>
	<link href="https://fonts.googleapis.com/css?family=Amatica+SC:400,700|Open+Sans+Condensed:300" rel="stylesheet">
 
	<style>
		body {
			margin: 0;
		}
		h1, h2 {
			font-family: 'Amatica SC', cursive;
			font-weight: 700;
			text-align: center;
		}
		p {
			font-family: 'Open Sans Condensed', sans-serif;
		}
		.header {
			background-color: skyblue;
			height: 100px;
			text-align: center;
			color: #4f889f;
			padding: 1px;
		}
		.container div {
			padding: 1%;
			box-sizing: border-box;
			min-height: 500px;
		}
		.left-col, .right-col {
			background-color: #f4f4f4;
			width: 25%;
			float: left;
		}
		.center-col {
/* 			background-color: pink; */
			width: 50%;
			float: left;
		}
		.footer {
			clear: both;
			font-family: 'Amatica SC', cursive;
			background-color: skyblue;
			text-align: center;
			height: 50px;
			padding-top: 10px;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
<div class="header">
	<h1>The 3 Column Layout</h1>
</div>
<div class="container">
	<div class="left-col">
		<h2>Left</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium leo auctor luctus. Cras suscipit lectus sit amet tellus vestibulum porta. Nullam hendrerit ante erat, eget pretium nunc faucibus id. Integer ut urna tellus. In pharetra, lectus sed ornare facilisis, nisl ligula interdum massa, at vehicula libero enim id libero. Sed ac fringilla purus. Aenean finibus est sit amet faucibus porta. Integer interdum finibus tempor.</p>
	</div>
	<div class="center-col">
		<h2>Center</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium leo auctor luctus. Cras suscipit lectus sit amet tellus vestibulum porta. Nullam hendrerit ante erat, eget pretium nunc faucibus id. Integer ut urna tellus. In pharetra, lectus sed ornare facilisis, nisl ligula interdum massa, at vehicula libero enim id libero. Sed ac fringilla purus. Aenean finibus est sit amet faucibus porta. Integer interdum finibus tempor.</p>
	</div>
	<div class="right-col">
		<h2>Right</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium leo auctor luctus. Cras suscipit lectus sit amet tellus vestibulum porta. Nullam hendrerit ante erat, eget pretium nunc faucibus id. Integer ut urna tellus. In pharetra, lectus sed ornare facilisis, nisl ligula interdum massa, at vehicula libero enim id libero. Sed ac fringilla purus. Aenean finibus est sit amet faucibus porta. Integer interdum finibus tempor.</p>
	</div>
</div>
<div class="footer">
	&copy; All Rights Reserved.
</div>
</body>
</html>

References

Google Fonts: https://fonts.google.com/