CSS code for DIV Layout Practice#2
<!doctype html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 930px;
background-color: aqua;
}
#leftbig {
border: 2px solid black;
width: 75%;
height: 848px;
background-color: white;
}
#usandaus {
margin: 2px;
width: 60%;
height: 825px;
background-color: white;
}
#us {
margin: 2px;
background-color: lightblue;
width: 100%;
height: 494px;
float: left;
}
#aus {
margin: 2px;
background-color: lightgreen;
width: 100%;
height: 321px;
float: left;
}
#countries {
margin: 2px;
float: right;
width: 38%;
height: 825px;
background-color: white;
}
#uk {
margin: 2px;
background-color: lightgreen;
width: 100%;
height: 200px;
float: left;
}
#ger {
margin: 2px;
background-color: yellowgreen;
width: 100%;
height: 200px;
float: left;
}
#france {
margin: 2px;
background-color: greenyellow;
width: 100%;
height: 200px;
float: left;
}
#canada {
margin: 2px;
background-color: chartreuse;
width: 100%;
height: 200px;
float: left;
}
#rightbig {
margin: 2px;
background-color: white;
border: 2px solid black;
width: 99%;
height: 300px;
float: right;
}
#d0 {
background-color: greenyellow;
width: 50%;
height: 180px;
float: right;
}
#d1 {
background-color: cyan;
width: 50%;
height: 180px;
float: right;
}
#d2 {
margin: 1px solid black;
background-color: darkgreen;
width: 25%;
height: 120px;
float: left;
}
#d3 {
background-color: sandybrown;
width: 25%;
height: 120px;
float: left;
}
#d4 {
background-color: saddlebrown;
width: 50%;
height: 70px;
float: left;
}
#d5 {
background-color: rosybrown;
width: 50%;
height: 50px;
float: left;
}
#smallestdiv {
background-color: orange;
width: 100%;
height: 120px;
float: right;
}
#smalldiv {
background-color: white;
width: 100%;
height: 180px;
float: right;
}
#rightbig {
margin: 2px;
background-color: black;
border: 2px solid black;
width: 99%;
height: 300px;
float: right;
}
#rightsecond {
margin: 2px;
background-color: red;
border: 2px solid black;
width: 99%;
height: 306px;
float: right;
}
#rightsecond1 {
margin: 2px;
background-color: yellowgreen;
border: 2px solid black;
width: 62%;
height: 145px;
float: left;
}
#rightsecond2 {
margin: 2px;
background-color: greenyellow;
border: 2px solid black;
width: 62%;
height: 145px;
float: left;
}
#rightseconddiv {
margin: 2px;
background-color: red;
border: 2px solid red;
width: 33%;
height: 300px;
float: right;
}
#rightseconddiv1 {
margin: 2px;
background-color: green;
border: 2px solid black;
width: 100%;
height: 63px;
}
#rightseconddiv2 {
margin: 2px;
background-color: green;
border: 2px solid black;
width: 100%;
height: 63px;
}
#rightseconddiv3 {
margin: 2px;
background-color: green;
border: 2px solid black;
width: 100%;
height: 63px;
}
#rightseconddiv4 {
margin: 2px;
background-color: green;
border: 2px solid black;
width: 100%;
height: 63px;
}
#rightbiggest {
margin: 2px;
background-color: white;
border: 2px solid red;
width: 24%;
height: 848px;
float: right;
}
#lastdiv{
margin: 3px;
float: right;
background-color: white;
height: 220px;
width: 98%;
}
#lastdiv1{
background-color: green;
height:190px;
width: 30%;
margin: 3px;
float: left;
}
#lastdiv2{
background-color:blue;
height: 190px;
width: 30%;
margin: 3px;
float:left;
}
#lastestdiv{
float :left;
margin: 3px;
background-color:chartreuse;
height: 190px;
width: 20%;
}
#rediv{
float :left;
margin: 3px;
background-color:coral;
height:85px;
width: 92%;
}
#rediv1{
float :left;
margin: 3px;
background-color:lightcoral;
height: 85px;
width:92%;
}
#lastforever{
float :right;
margin: 3px;
background-color:red;
height: 190px;
width:12%;
}
</style>
</head>
<body>
<div id="container">
<div id="rightbiggest">
<div id="rightbig">
<div id="smalldiv">
<div id="d1">
</div>
<div id="d0">
Australia
</div>
</div>
<div id="smallestdiv">
<div id="d2">
</div>
<div id="d3">
france
</div>
<div id="d4">
germany
</div>
<div id="d5">
Canada
</div>
</div>
</div>
<div id="rightsecond">
<div id="rightseconddiv">
<div id="rightseconddiv1">
</div>
<div id="rightseconddiv2">
</div>
<div id="rightseconddiv3">
</div>
<div id="rightseconddiv4">
</div>
</div>
<div id="rightsecond1">
</div>
<div id="rightsecond2">
</div>
</div>
<div id="lastdiv">
<p>FY 2004<br></p>
<div id="lastdiv1">
</div>
<div id="lastdiv2">
</div>
<div id="lastestdiv">
<div id="rediv">
</div>
<div id="rediv1">
</div>
</div>
<div id="lastforever">
</div>
</div>
</div>
<div id="leftbig">
<p>FY 2004</p>
<div id="countries">
<div id="uk">
Uk
</div>
<div id="ger">
Germany
</div>
<div id="france">
France
</div>
<div id="canada">
cananda
</div>
</div>
<div id="usandaus">
<div id="us">
United States
</div>
<div id="aus">
Australia
</div>
</div>
</div>
</div>
</body></html>
Comments
Post a Comment