<html>
<head>
<style>
.centered1 {
width: 70%;
height: 5%;
top: 0.5%;
left: 15%;
position: absolute;
margin-top: 1%;
margin-left: 0px;
border: solid 1px #ccc;
background: yellow;
}
</style>
<style>
.centered2 {
width: 70%;
height: 4%;
top: 6%;
left: 15%;
position: absolute;
margin-top: 1.1%;
margin-left: 0px;
border: solid 1px #ccc;
background: purple;
}
</style>
<style>
.centered3 {
width: 10%;
height: 70%;
top: 10%;
left: 15%;
position: absolute;
margin-top: 1.5%;
margin-left: 0px;
border: solid 1px #ccc;
background: red;
}
</style>
<style>
.centered4 {
width: 50%;
height: 70%;
top: 10%;
left: 25%;
position: absolute;
margin-top: 1.5%;
margin-left: 0px;
border: solid 1px #ccc;
background: pink;
}
</style>
<style>
.centered5 {
width: 10%;
height: 70%;
top: 10%;
left: 75%;
position: absolute;
margin-top: 1.5%;
margin-left: 0px;
border: solid 1px #ccc;
background: orange;
}
</style>
<style>
.centered6 {
width: 70%;
height: 5%;
top: 65%;
left: 15%;
position: absolute;
margin-top: 11.7%;
margin-left: 0px;
border: solid 1px #ccc;
background: green;
}
</style>
<style>
.centered7 {
width: 70%;
height: 5%;
top: 70%;
left: 15%;
position: absolute;
margin-top: 11.8%;
margin-left: 0px;
border: solid 1px #ccc;
background: brown;
}
</style>
</head>
<body>
<div class="centered1"> test top </div>
<div class="centered2"> test top/meniu </div>
<div class="centered3"> test left </div>
<div class="centered4"> test centre </div>
<div class="centered5"> test right</div>
<div class="centered6"> test down </div>
<div class="centered7"> test bottom</div>
</body>
</html>
