Three Column layout with header and footer: The CSS
html, body { margin: 0; padding: 0; }
#header {
width: 800px;
float: left;
}
#maincontainer {
width: 800px;
float: left;
}
#nav {
width: 200px;
float: left;
}
#main {
float: right;
width: 600px;
}
#footer {
width: 800px;
float: left;
}
The XHTML
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>2 Column Header and Footer Layout</title>
<link href=”styles.css” rel=”stylesheet” type=”text/css” />
</head><body>
<div id=”header”><h1>Header</h1></div>
<div id=”maincontainer”>
<div id=”main”>
<p>Whee</p>
<p>
</div>
<div id=”nav”>
<ul>
<li><a href=””>Link</a></li>
<li><a href=””>Link</a></li>
<li><a href=””>Link</a></li>
<li><a href=””>Link</a></li>
</ul>
</div>
</div>
<div id=”footer”><h4>Footer</h4></div>
</body>
</html>
From: http://sitestree.com/?p=3649
Categories:Root, By Sayed Ahmed
Tags:
Post Data:2016-09-15 14:20:36
Shop Online: https://www.ShopForSoul.com/
(Big Data, Cloud, Security, Machine Learning): Courses: http://Training.SitesTree.com
In Bengali: http://Bangla.SaLearningSchool.com
http://SitesTree.com
8112223 Canada Inc./JustEtc: http://JustEtc.net (Software/Web/Mobile/Big-Data/Machine Learning)
Shop Online: https://www.ShopForSoul.com/
Medium: https://medium.com/@SayedAhmedCanada
