HTML Layout

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Layout Elements and Techniques

Websites display content in multiple columns (like a magazine or a newspaper).

Example:

				
					/* Style the header *
.city{
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Create two columns/boxes that floats next to each other */
.place{
  float: left;
  width: 30%;
  height: 300px; /* only for demonstration, should be removed */
  background: #ccc;
  padding: 20px;
}

/* Style the list inside the menu */
.place ul {
  list-style-type: none;
  padding: 0;
}

.desc {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #f1f1f1;
  height: 300px; /* only for demonstration, should be removed */
}

/* Clear floats after the columns */
.sec::after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
.bottom {
  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) {
  .place, .desc {
    width: 100%;
    height: auto;
  }
}
<html>
<body>

<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>

<header class="city">
  <h2>Cities</h2>
</header>

<section class="sec">
  <nav class="place">
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>
  
  <article class="desc">
    <h1>London</h1>
    <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history.</p>
  </article>
</section>
<footer class="bottom">
  <p>Footer</p>
</footer>
</body>
</html>

				
			

Output:

CSS Layout Float

In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.

Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history.

Footer

HTML Layout Elements

HTML offers several semantic elements that describe the different parts of a web page:

 

html layout

<header> – Defines a header for a document or a section

<nav> – Defines a set of navigation links

<section> – Defines a section in a document

<article> – Defines an independent, self-contained content

<aside> – Defines content aside from the content (like a sidebar)

<footer> – Defines a footer for a document or a section

<details> – Defines additional details that the user can open.

<summary> – Defines a heading for the <details> element

HTML Layout Techniques

There are four different techniques used to create multicolumn layouts. Each technique consists of pros and cons:

  • CSS framework
  • CSS float property
  • CSS flexbox
  • CSS grid
CSS Float Layout

It is common to use the CSS float property for web layouts. Float is easy to learn, all you need is to understand the working of float and clear properties work. Disadvantages: Floating elements are attached to the document flow, which may reduce the flexibility.

Example

				
					        div.mycontent {
            width: 100%;
            border: 1px solid green;
         }
         .head, .foot {
            padding: 1em;
            color: green;
            background-color: #FAFAFA;
            text-align: left;
         }
         .navb {
            float: left;
            max-width: 150px;
            padding: 1em;
         }
         .navb ul {
            list-style-type: none;
            padding: 0;
         }
         .desc {
            margin-left: 10px;
            border-left: 1px solid gray;
            padding: 1em;
            overflow: hidden;
         }
  <html>
   <body>
      <div class="mycontent">
         <header class="head">
            <h1>WebHostGuru.com</h1>
            <h3>Simply Easy Learning</h3>
        </header>
        <nav class="navb">
           <ul>
              <li><a href="/tutorialslibrary.htm">Tutorials Library</a></li>
              <li><a href="/videotutorials/index.htm">Video Tutorials</a></li>
              <li><a href="/codingground.htm">Coding Ground</a></li>
              <li><a href="/tutor_connect/index.php">Tutor Connect</a></li>
              <li><a href="/online_dev_tools.htm">Tools</a></li>
           </ul>
        </nav>
        <article class="desc">
           <h1>About Us</h1>
           <p>This is demo content.</p>
           <p>This is demo content.</p>
           <p>This is demo content.</p>
           <p>This is demo content.</p>
        </article>
        <footer class="bottom">Add the footer content here</footer>
    </div>
   </body>
</html>

				
			

Output:

CSS Flexbox Layout

CSS flexbox Layout ensures that elements behaves properly when the page layout should accommodate different screen sizes and display devices.

Example

				
					/* Style the header */
.head {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Container for flexboxes */
.sec {
  display: -webkit-flex;
  display: flex;
}

/* Style the navigation menu */
.navb {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #ccc;
  padding: 20px;
}

/* Style the list inside the menu */
.navb ul {
  list-style-type: none;
  padding: 0;
}

/* Style the content */
.desc {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #f1f1f1;
  padding: 10px;
}

/* Style the footer */
.foot {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 600px) {
  .sec {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
<html>
<body>
<h2>CSS Layout Flexbox</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 and earlier versions.</p>
<header class="head">
  <h2>Cities</h2>
</header>
<section>
  <nav class="navb">
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>
  
  <article class="desc">
    <h1>London</h1>
    <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
  </article>
</section>

				
			

Output: