HTML Columns
From w3cyberlearnings
Contents |
HTML - Columns
Create HTML Columns can be done in two ways, using table tags (old way) or using the block (div) with CSS. In this tutorial, you will learn how to create columns by using block with CSS.
Example TRY-IT
<!DOCTYPE html>
<html>
<head>
<title>Column</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#container {
width:500px;
margin:0 auto;
}
.column-left {
float:left;
width:270px;
border:solid 1px #000;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 2px;
}
.column-right {
float:right;
width:200px;
border:solid 1px #000;
padding-left: 5px;
padding-right: 5px;
}
</style>
</head>
<body>
<div id="container">
<div class="column-left">
Singapore, officially the Republic of Singapore,
is a Southeast Asian city-state off the southern
tip of the Malay Peninsula,
137 kilometres (85 mi) north of the equator
</div>
<div class="column-right">
An island country made up of 63 islands, it is separated
from Malaysia by the Straits of Johor
to its north and from Indonesia's Riau Islands
by the Singapore Strait to its south.
</div>
<div class="column-left">
Singapore is highly urbanised but almost half
of the country is covered by greenery.
More land is being created for development
through land reclamation.
</div>
</div>
</body>
</html>
Output
Related Link
- HTML - Tables
- HTML - Box Container
- HTML - Columns
- HTML - Navigation
- HTML - Layout
