Responsive 3 coloumn layout using Html and Css only

First create index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3 coloumn layout</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<header><p> History Of India</p></header>
<div class="main_wrapper">

<div class="leftside"> 
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Mordern</a></li>
<li><a href="#">Geography</a></li>
<li><a href="#">Poltics</a></li>
<li><a href="#">Ruels</a></li>
<li><a href="#">Map</a></li>
<li><a href="#">Partition of India</a></li>
<li><a href="#">Military of India</a></li>
<li><a href="#">revolution</a></li>
<li><a href="#">Indo-War</a></li>
<li><a href="#">Indian Emergency</a></li>
<li><a href="#">1980s</a></li>
<li><a href="#">Janata Dal</a></li>
<li><a href="#">1990s</a></li>
<li><a href="#">Era of coalitions</a></li>
<li><a href="#">2000s</a></li>
<li><a href="#">Bharatiya Janata Party</a></li>
<li><a href="#">Congress rule returns</a></li>
<li><a href="#">Economic transformation</a></li>
<li><a href="#">2010s</a></li>
</ul>

</div>

<div class="main_container"> 
<h2>Indian History<h2>
<p>The history of the Republic of India began on 26 January 1950. The country became an independent nation within the British Commonwealth on 15 August 1947. Concurrently the Muslim-majority northwest and east of British India was separated into the Dominion of Pakistan, by the partition of India. The partition led to a population transfer of more than 10 million people between India and Pakistan and the death of about one million people. Nationalist leader Jawaharlal Nehru became the first Prime Minister of India and Sardar Vallabhbhai Patel became the Deputy Prime Minister of India and its Minister of Home Affairs. But the most powerful moral leader Mahatma Gandhi accepted no office. The new constitution of 1950 made India a secular and a democratic state. It has a Hindu majority, a large Muslim minority, and numerous other religious minorities including Sikhs and Christians.</p>

<p>The nation faced religious violence, casteism, naxalism, terrorism and regional separatist insurgencies, especially in Jammu and Kashmir and northeastern India. India has unresolved territorial disputes with China, which, in 1962, escalated into the Sino-Indian War, and with Pakistan, which resulted in wars in 1947, 1965, 1971 and 1999. India was neutral in the Cold War, but purchased its military weapons from the Soviet Union, while its arch-foe Pakistan was closely tied to the United States and the People's Republic of China.</p>

<p>India is a nuclear-weapon state; having conducted its first nuclear test in 1974, followed by another five tests in 1998.[1] From the 1950s to the 1980s, India followed socialist-inspired policies. The economy was shackled by extensive regulation, protectionism and public ownership, leading to pervasive corruption and slow economic growth. Beginning in 1991, significant economic reforms[3] have transformed India into the third largest and one of the fastest-growing economies in the world. Today, India is a major world power with a prominent voice in global affairs and is seeking a permanent seat in the United Nations Security Council. Many economists, military analysts and think tanks expect India to become a superpower in the near future.</p>

</div>

<div class="rightside"> 
<ul>
<li><a href="#">Assam</a></li>
<li><a href="#">Bihar</a></li>
<li><a href="#">Chandigarh</a></li>
<li><a href="#">Chhattisgarh</a></li>
<li><a href="#">Goa</a></li>
<li><a href="#">Gujarat</a></li>
<li><a href="#">Haryana</a></li>
<li><a href="#">Himachal Pradesh</a></li>
<li><a href="#">Jammu and Kashmir</a></li>
<li><a href="#">Jharkhand</a></li>
<li><a href="#">Karnataka</a></li>
<li><a href="#">Kerala</a></li>
<li><a href="#">Madhya Pradesh</a></li>
<li><a href="#">Maharashtra</a></li>
<li><a href="#">Manipur</a></li>
<li><a href="#">Meghalaya</a></li>
<li><a href="#">Mizoram</a></li>
<li><a href="#">Nagaland</a></li>
<li><a href="#">Orissa</a></li>
<li><a href="#">Punjab</a></li>
</ul>
</div>

</div>

second create style.css

@charset "utf-8";
body{
background:#CCCCCC;
margin:auto;
width:100%;
height:100%;
}
.main_wrapper{
/*background:#999999;*/
width:90%;
padding:10px;
margin:auto;
overflow:auto;
margin-top:10px;
margin-bottom:10px;
}
header{
padding:10px;

margin:auto;
background:#666666;
}
header p{
text-align:center;
}
footer{
background:#333333;
margin:auto;
padding:5px;

}
footer p{
text-align:center;
}
.leftside{
float:left;
width:20%;
min-height:800px;
height:auto;
overflow:auto;
background:#333333;
border-radius: 10px;
}
.leftside ul{
}
.leftside ul li{
}
.leftside ul li a{
text-decoration:none;
color:#CCCCCC;
line-height:44px;
}
.leftside li:hover{
color:#0066CC;
}
.main_container{

float:left;
width:55%;
min-height:800px;
height:auto;
overflow:auto;
/*background:#999999;*/
padding:7px;

}
.main_container h2{
font-size:24px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
.main_container p{
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
line-height:24px;
}
.rightside{

float:left;
width:20%;
min-height:800px;
height:auto;
overflow:auto;
background:#333333;
border-radius: 10px;
}
.rightside ul{
}
.rightside ul li{
}
.rightside ul li a{
text-decoration:none;
color:#CCCCCC;
line-height:44px;
}
.rightside li:hover{
color:#0066CC;
}

Tuesday, 17 February 2015

Responsive 3 column Layout using Html and Css

Responsive 3 coloumn layout using Html and Css only

First create index.html

second create style.css

No comments:

Post a Comment