Easy way to Learn Web Design

How to make two column responsive full width html webpage templates

Here In this tutorial, I am creating two column equal width responsive full width HTML Page. It is relatively easy to code and understand. I have created 3 sections here Header, content and Body.

Features Of this template

1. No Horizontal Scroll
2. No Vertical Scroll
3. Equal width two column
4. Header stick to top
5. Footer stick to bottom

Preview Layout

All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content.
View Demo

2-column-responsive-layout

Dimension Structure of the layout

Dimension of the layout

Here is the HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Full Width 2 Column HTML Page</title>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<a href="#" class="fl logo">Logo</a>
<a href="#" class="fr"><img src="menu.png"></a>
</header>
<div class="main">
<div class="col1"></div>
<div class="col2">
<div class="text">
<h1>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<a href="#" class="button"> VIEW DETAILS </a>
</div></div></div>
<footer>© Website Name. All Rights Reserved (Terms of Use)</footer>
</body>
</html>

Here is the CSS Code

body{font-family: 'Titillium Web', sans-serif;}
a.logo{text-decoration:none;color:#000000;font-size:120%;}
header,div,p,h1,h2,h3,table,section,main,body{margin:0;padding:0;}
header{height:45px;border-bottom:1px solid #DDDDDD;box-sizing:border-box;padding:10px;position:fixed;top:0;left:0; background:#ffffff; width:100%;}
header a.fl{float:left;}
header a.fr{float:right;}
header:after {content: ""; display: table;clear: both;}
.main{width:100%;}
footer{position:fixed;bottom:0;left:0; background:#ffffff; width:100%;padding:10px 5px;box-sizing:border-box;border-top:1px solid grey;}
.col1{height:100vh;width:50%;float:left;background:url(parisimage.jpg) no-repeat center center;background-size:cover;}
.col1 img{max-width:100%;}
.col2{height:100vh;width:50%;float:right;}
.text{padding:10%;margin-top:2%;box-sizing:border-box}
.text p{margin-top:10%}
h1 {font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;font-weight: 100; font-size:100%;padding-top:45px;color:#446581;}
footer{text-align:center;}
a.button{background:#446581;padding:5px 10px;display:inline-block;margin-top:10px;color:#FFFBFB;text-decoration:none;}

Description of HTML Code

1. in Line number 9 to 12 HTML Header element is given. In this header I have placed two anchor element. One anchor element contains logo part and is set to left position with the help of class “fl” and other anchor element contains menu and is set to right with the help of class “fr”.

fl : float:left;
fr : float:right; 

check out CSS Code in line number 5 and 6.
Here I have given instruction to browser that the anchor element with fl class and which is in header tag, place this element at left position of the browser. Same I have done for another anchor element and placed it at right position of the browser.

2. In line number 13. I have set the div with class “main”. Set the width of this main class to 100%.
3. Create 2 more div in “main” class div and set the width of both div to 50% each. I have given this line number 10 & 12 of CSS code. Set the height of both div to 100vh (100% vertical height).

Create your own HTML Page

I request you to try this in your browser. If you have any query, please comment in the box I will answer all your queries regarding this tutorial.

View Demo

Leave A Reply

Your email address will not be published.