HTML Layout

Bookmark
How to create a layout for a webpage using div?

Webpages use different layouts to display content to the user. Layouts are integral part of web building and HTML. Let us learn about how to design a web page layout using HTML and CSS this HTML chapter.

HTML Layout Using Div Tag

Following is an example two column layout. This is a standard layout design for web pages. It has a header, followed by a left column for menu and right larger column for page content display and in the bottom a footer.

<!DOCTYPE html>
<html>
<head>
      <style>
      	#example-header {
          background-color:#368E00;
          color:white;
          text-align:center;
          padding:4px;
      	}
      	#example-navigation {
          background-color:#efefef;
          width:100px;
          float:left;
          padding:10px;          
          height:300px;
      	}
#example-content { width:400px;   float:left;   padding:10px;           }
#example-footer {     background-color:#aaaaaa;     color:white;     clear:both;     text-align:center;     padding:10px;  
  }
#example-h1{border:none;}
</style>
 </head> <body> <div id="example-header"> <h1 id="example-h1">Web Page Title</h1> </div> <div id="example-navigation"> Lion<br> Crocodile<br> Cheetah<br> </div>
<div id="example-content"> <h2>Lion</h2> <p> Highly distinctive, the male lion is easily recognised by its mane, and its face is one of the most widely recognised animal symbols in human culture.
</p> <p>It has been extensively depicted in sculptures, in paintings, on national flags, and in contemporary films and literature.</p>
</div> <div id="example-footer">Copyright TutorialWalk</div> </body> </html>

Example HTML Layout Output

Web Page Title

Lion
Crocodile
Cheetah

Lion

Highly distinctive, the male lion is easily recognised by its mane, and its face is one of the most widely recognised animal symbols in human culture.

It has been extensively depicted in sculptures, in paintings, on national flags, and in contemporary films and literature.

Exception Occured:

TypeErrorException
Messageerror_log(app.log): Failed to open stream: Permission denied
File/home/dh_czz6eb/tutorialwalk.com/common/error.php
Line36
Trace#0 (): log_error(2, 'error_log(app.log): Failed to open stream: Permission denied', '/home/dh_czz6eb/tutorialwalk.com/common/error.php', 36)
#1 /home/dh_czz6eb/tutorialwalk.com/common/error.php(36): error_log('12-07-2024 16:26:52 pm (IST),/home/dh_czz6eb/tutorialwalk.com/common/common.php,193,0,ErrorException,Optional parameter $per_page declared before required parameter $href is implicitly treated as a required parameter,/html/html-layout.html,#0 /home/dh_czz6eb/tutorialwalk.com/common/error.php(115): log_error(8192, 'Optional parame...', '/home/dh_czz6eb...', 193)
#1 [internal function]: check_for_fatal()
#2 {main}
', 3, 'app.log')
#2 /home/dh_czz6eb/tutorialwalk.com/common/error.php(8): log_exception(ErrorException)
#3 /home/dh_czz6eb/tutorialwalk.com/common/error.php(115): log_error(8192, 'Optional parameter $per_page declared before required parameter $href is implicitly treated as a required parameter', '/home/dh_czz6eb/tutorialwalk.com/common/common.php', 193)
#4 (): check_for_fatal()
REQUEST_URI/html/html-layout.html