HTML – Layout Techniques


Layout techniques

This is a process of creating layouts which plays the most important things while designing a website.

Creating layouts makes the website content well arranged and easy to understand for the users.

What are the various techniques for creating layouts ?

There are various techniques and frameworks available for creating multicolumn layouts, some of them are

1. HTML tables (Not recommended)

2. CSS float property

3. CSS framework

4. CSS flex box

5. Layout using div

Which layout techniques is the best ?

1. HTML tables (Not recommended)

HTML tables are not recommended for creating web page layouts.

Tables code is not so convenient to create webpage also sometimes it collapses the structure.

HTML tables can be used for designing desktop, online and mobile applications.


HTML table structure is also used to create email design.

2. CSS Float property

Float property is good and simple way to create the website more attractive.

Arranging the images, and moving columns inside the web page is easy using float property.

Float property is more flexible for designing the web page but we should use it with caution.

3. CSS framework

CSS framework is the easiest and fastest way for layout creation.

We can simply use the frameworks which provides us easy framework options to create multicolumn webpage.

There are many frameworks available, its our choice we can choose anyone of them.

4. Flex box

Flex box is the most convenient and fastest way for layout creation.

This is new and we have to spend time to learn/study before using this.

Flex box provides new features which provides the great experience while creating webpages.

The only drawback is Flex box is not supported in all the browsers.

Flex box have some bugs, if possible please read and know the bugs before using Flex box.

5. Layout using <div></div>

This is the most common easy method for creating HTML layouts.

The <div> element itself is a division element, divides the block of portion in the webpage.

using <div> element we can adjust any part of the webpage as per our need.

We can also use nested <div> elements for specifying inner elements in HTML layout.

HTML coding for a website !!!

Click to Learn More about – HTML Tutorial for beginners

1. HTML tables (Not recommended)

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>My Webpage</title>
		<style>
			header{
				background-color: orange;  
				height: 80px;
				width: 100%;
			}
			table, td {
				border-collapse: collapse;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<p>Layouts Techniques using HTML Tables</p>
		<header>
			<p></p>
		</header>
		<table height="300px">
			<tr>
				<td colspan="3"></td>
				<td colspan="3" style="font-size: 4em; font-weight: bold" valign="bottom">CSTechbook</td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td colspan="4" style="font-size: 1.3em;" valign="top">LEARNING GIVES CREATIVITY, CREATIVITY LEADS TO THINKING, THINKING PROVIDES KNOWLEDGE, KNOWLEDGE MAKES YOU GREAT – A.P.J ABDUL KALAM</td>
			</tr>
			<tr>
				<td width="400px"></td>
				<td width="70px"><a href="#">Home</a></td>
				<td width="120px"><a href="#">Client-Side</a></td>
				<td width="120px"><a href="#">Server-Side</a></td>
				<td width="80px"><a href="#">Hardware</a></td>
				<td ><input type="search" placeholder="search"></td>
			</tr>
		</table>
	</body>

</html>

Output :

2. CSS float property

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>My Webpage</title>
		<style>
			#box1 {
                                width: 610px;
                                height: 100px;
                                border: 1px solid orange;
                                margin: 5px;
                                clear: both;
                        }
			#box2 {
				width: 200px;
				height: 200px;
				border: 1px solid red;
				margin: 5px;
				float: left;
			}
			#box3 {
                                width: 400px;
                                height: 200px;
                                border: 1px solid green;
                                float: left;
                                margin: 5px;
                        }
			#box4 {
				width: 610px;
				height: 100px;
				border: 1px solid blue;
				margin: 5px;
				clear: both;
			}
		</style>
	</head>
	<body>
		<p>Layouts Techniques using CSS Float</p>
		<header>
			<p></p>
		</header>
		<div id="box1"><p align="center">Header</p></div>
		<div id="box2"><p align="center">Menu</p></div>
		<div id="box3"><p align="center">Body</p></div>
		<div id="box4"><p align="center">Footer</p></div>
	</body>

</html>

Output :


3. CSS framework

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>My Webpage</title>
		<style>
			.col1{
				color:red;
				 width: 610px;
                                height: 300px;
                                border: 1px solid red;
                                margin: 5px;
                                clear: both;
			}
			.col2{
                                color:green;
				width: 610px;
                                height: 100px;
                                border: 1px solid green;
                                margin: 5px;
                                clear: both;
                        }
			.col1-1{
                                color:blue;
				width: 300px;
                                height: 50px;
                                border: 1px solid blue;
                                margin: 5px;
                                clear: both;
				margin-left: 20px;
                        }
		</style>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	</head>
	<body>
		<p>Layouts Techniques using CSS Framework</p>
		<header>
			<p></p>
		</header>
		<div class="container">
			<div class="row">
				<div class="col1">
					Column1
					<div class="row">
						<div class="col1-1">Row1</div>
						<div class="col1-1">Row2</div>
					</div>
				</div>
				<div class="col2">Coloumn2</div>
			</div>
		</div>
	</body>

</html>

Output :

4. CSS Flex box

Example :

<!DOCTYPE html>
<html>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.column {
	flex: 25%;
	max-width: 25%;
	padding: 0 4px;
	color:orange;
	width: 300px;
	height: 50px;
	border: 1px solid blue;
	margin: 5px;
	clear: both;

}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
</style>
<body>

<div class="header">
  <h1>Welcome to CSTechbook</h1>
</div>

<div class="row">
  <div class="column">
	  <p>Column1</p>
  </div>

  <div class="column">
	  <p>Column2</p>
  </div>

  <div class="column">
	  <p>Column3</p>
  </div>

  <div class="column">
	  <p>Column4</p>
  </div>
</div>

</body>
</html>

Output :

5. Layout using <div></div>

Example :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Div Layout</title>
<style>
    body {
        font: 14px Arial,sans-serif;
        margin: 0px;
    }
    .header {
        padding: 10px 20px;
	border: 1px solid red;
    }
    .header h1 {
        font-size: 24px;
    }
    .container {
        width: 100%;
    }
    .nav, .section {
        float: left;
        padding: 20px;
        min-height: 170px;
        box-sizing: border-box;
    }
    .nav {
        width: 20%;
	border: 1px solid red;
    }
    .section {
        width: 80%;
    }
    .nav ul {
        list-style: none;
        line-height: 24px;
        padding: 0px;
    }
    .nav ul li a {
        color: #333;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .footer {
	border: 1px solid red;
        text-align: center;
        padding: 5px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>CSTechook</h1>
        </div>
        <div class="wrapper clearfix">
            <div class="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Client-Side</a></li>
                    <li><a href="#">Server-Side</a></li>
                    <li><a href="#">Hardware</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="section">
                <h2>Welcome to CSTechbook</h2>
            </div>
        </div>
        <div class="footer">
            <p>Footer elements</p>
        </div>
    </div>
</body>
</html>

Output :



2 comments

  1. Howdy! This post couldn’t be written any better! Reading through this article reminds me of my previous roommate!
    He continually kept preaching about this. I will send this information to him.
    Fairly certain he will have a good read. I appreciate you for
    sharing!

Comments are closed.