Skip to main content

how to prepare layout in html example



(1)write code for  index.html file:
<html>
<head>

<link rel="stylesheet"   type="text/css"  href="style.css">
</head>
<body>
<div class=header>

</div>
<div class=container>
<div class=section>
</div>
<div class=article>
</div>
<div class=aside>

</div>


</div>
<div class=footer>
</div>

</body>
</html>


(2)style.css   file code :
.header
{
height:200px;
width:800px;

background-color:purple;

}

.container
{
float:left;
height:500px;
width:800px;
background-color:yellow;
}
.section
{
float:left;
height:250px;
width:400px;
background-color:orange;

}
.article
{
float:left;
height:250px;
width:400px;
background-color:lightgreen;
clear:left;
}
.aside
{
position:relative;
float:right;
height:500px;
width:400px;
margin-top:-250px;
background-color:blue;
}
.footer
{
float:left;
height:100px;
width:800px;
background-color:black;

}

Comments

Post a Comment