View video tutorial
HTML Layout
HTML
HTML Layout provides a way to arrange a web page with it components.
HTML Layout
HTML layout is a way to design web page.
It is a structure where different parts of a page are placed.
Users should feel comfortable to use components easily.
Layout should be easy to maintain and open for enhancement and modification.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout Example</title>
<style>
* {
box-sizing: border-box;
}
.container {
margin: 10px;
}
.header {
border: 1px solid red;
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.navbar {
border: 1px solid red;
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.content {
border: 1px solid red;
width: 100%;
height: 200px;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
#left {
border: 1px solid blue;
width: 48%;
float: left;
height: 90%;
}
.section {
border: 1px solid green;
height: 45%;
margin: 5px;
}
.article {
border: 1px solid green;
height: 45%;
margin: 5px;
}
#right {
border: 1px solid blue;
width: 48%;
float: right;
height: 90%;
}
.aside {
border: 1px solid green;
height: 93%;
margin: 5px;
}
.footer {
border: 1px solid red;
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.hcenter {
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<header class="header hcenter">
Header
</header>
<nav class="navbar hcenter">
Navbar
</nav>
<div class="content">
<div id="left">
<section class="section hcenter">
Section
</section>
<article class="article hcenter">
Article
</article>
</div>
<div id="right">
<aside class="aside hcenter">
Aside
</aside>
</div>
</div>
<footer class="footer hcenter">
Footer
</footer>
</div>
</body>
</html>Click on the "Try it Now" button to see how it works.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout Example</title>
<style>
* {
box-sizing: border-box;
}
.container {
margin: 10px;
}
.header {
border: 1px solid red;
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.navbar {
border: 1px solid red;
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.content {
border: 1px solid red;
width: 100%;
height: 200px;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
#left {
border: 1px solid blue;
width: 33%;
float: left;
height: 90%;
}
.section {
border: 1px solid green;
height: 45%;
margin: 5px;
}
.article {
border: 1px solid green;
height: 45%;
margin: 5px;
}
#right {
border: 1px solid blue;
width: 34%;
float: right;
height: 90%;
}
#middle1 {
border: 1px solid blue;
width: 33%;
float: left;
height: 90%;
}
.aside {
border: 1px solid green;
height: 93%;
margin: 5px;
}
.footer {
border: 1px solid red;
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.hcenter {
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<header class="header hcenter">
Header
</header>
<nav class="navbar hcenter">
Navbar
</nav>
<div class="content">
<div id="left">
<section class="section hcenter">
Section
</section>
<article class="article hcenter">
Article
</article>
</div>
<div id="middle1">
<aside class="aside hcenter">
Aside2
</aside>
</div>
<div id="right">
<aside class="aside hcenter">
Aside
</aside>
</div>
</div>
<footer class="footer hcenter">
Footer
</footer>
</div>
</body>
</html>Click on the "Try it Now" button to see how it works.