The previous lesson of html lessons series was about row and column span in html. In this lesson we will learn to make a simple 2 column layout of a web page.
2 column layout web page:
A simple 2 column layout web page consists of a header, a navigation menu, a main content area (2 column) and a footer.
The above code shows the html structure of a very simple 2 column web page. Now we will use our knowledge from the previous html lessons to make an actual 2 column layout of a web page.If you do not have any knowledge of html, please follow the html lesson series from the very beginning lesson.
To achieve the web page layout similar to the one shown in the above image consider the html code shown below:
<head>
<title>Demo Page</title>
<style>
body{ background:#363333; }
h1{ margin:20px;font-size:24px; }
.header{ background:#4E2121;width:100%;height:80px;border:1px solid black;color:white;font-family:arial; }
.navigation{ height:auto;padding:0px;background:#1A1A1A;font-family:arial; }
.horizontal-menu{ overflow:hidden;padding:10px;margin-top:2px; }
.horizontal-menu li{ float:left;width:120px;list-style:none;text-align:center;color:white;border-right:2px solid white;font-family:arial; }
.content{ width:100%;overflow:hidden;margin-top:0px;font-family:arial;color:white; }
.sidebar{ width:30%;float:left; }
.vertical-menu{ padding:10px;margin-top:2px; }
.vertical-menu li{ width:200px;list-style:none;background:#4E2121;border-bottom:2px solid white;color:white;padding:10px; }
.main{ width:60%;float:left;padding:10px;border:1px solid white;margin-top:50px;min-height:300px; }
.footer{ width:100%;border:1px solid black;text-align:center;background:4E2121;color:white;font-family:arial;padding-top:10px;padding-bottom:10px;margin-top:30px; }
</style>
</head>
<body>
<div class="header">
<h1>My Demo Website</h1>
</div>
<div class="navigation">
<ul class="horizontal-menu">
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
</ul>
</div>
<div class="content">
<div class="sidebar">
<ul class="vertical-menu">
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
</ul>
</div>
<div class="main">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</div>
<div class="footer">
All Rights Reserved.
</div>
</body>
Related Posts2 column layout web page:
A simple 2 column layout web page consists of a header, a navigation menu, a main content area (2 column) and a footer.
<head>
<title>Demo Page</title>
</head>
<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
</div>
<div id="footer"></div>
</body>
The above code shows the html structure of a very simple 2 column web page. Now we will use our knowledge from the previous html lessons to make an actual 2 column layout of a web page.If you do not have any knowledge of html, please follow the html lesson series from the very beginning lesson.
To achieve the web page layout similar to the one shown in the above image consider the html code shown below:
<head>
<title>Demo Page</title>
<style>
body{ background:#363333; }
h1{ margin:20px;font-size:24px; }
.header{ background:#4E2121;width:100%;height:80px;border:1px solid black;color:white;font-family:arial; }
.navigation{ height:auto;padding:0px;background:#1A1A1A;font-family:arial; }
.horizontal-menu{ overflow:hidden;padding:10px;margin-top:2px; }
.horizontal-menu li{ float:left;width:120px;list-style:none;text-align:center;color:white;border-right:2px solid white;font-family:arial; }
.content{ width:100%;overflow:hidden;margin-top:0px;font-family:arial;color:white; }
.sidebar{ width:30%;float:left; }
.vertical-menu{ padding:10px;margin-top:2px; }
.vertical-menu li{ width:200px;list-style:none;background:#4E2121;border-bottom:2px solid white;color:white;padding:10px; }
.main{ width:60%;float:left;padding:10px;border:1px solid white;margin-top:50px;min-height:300px; }
.footer{ width:100%;border:1px solid black;text-align:center;background:4E2121;color:white;font-family:arial;padding-top:10px;padding-bottom:10px;margin-top:30px; }
</style>
</head>
<body>
<div class="header">
<h1>My Demo Website</h1>
</div>
<div class="navigation">
<ul class="horizontal-menu">
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
</ul>
</div>
<div class="content">
<div class="sidebar">
<ul class="vertical-menu">
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
<li>Home</li>
<li>About</li>
<li>Contact us</li>
<li>Disclaimer</li>
<li>Privacy</li>
</ul>
</div>
<div class="main">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</div>
<div class="footer">
All Rights Reserved.
</div>
</body>
Basics of Html
3 column layout of a web page
Html Tables
Row and Column Span in html
Html Form Elements
Html Text Tags
Html Image and Anchor Tags
Iframe tag in html
No comments:
Post a Comment