<!DOCTYPE html>
<html lang="en">
<head>
<title>Html Layout example-aimtocode.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<h2>CSS Layout Float</h2>
<p>HTML has a number of elements that can be used to define each of these areas. These include the main, header, footer, nav, aside and article elements. Also, the div element is a generic block level element that can be used for grouping HTML elements.</p>
<header>
<h2>aimtocode.com</h2>
</header>
<section>
<nav>
<ul>
<li><a href="http://aimtocode.com/java.html">Java</a></li>
<li><a href="http://www.aimtocode.com">c++</a></li>
<li><a href="http://aimtocode.com/html.html">html</a></li>
</ul>
</nav>
<article>
<h1>Heading</h1>
<p>The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so we can utilize these rows and columns in whatever way you like. We can design our webpage to put our web content in multiple pages. We can keep our content in middle column and we can use left column to use menu and right column can be used to put advertisement or some other stuff.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>