How to make layout using css and divs? - html

Question

I have a problem with making layout for my website. Basically, I don't know CSS, because of this can someone write a css for divs which will look like this? I haven't found any template which could solve my problem. I've found this
.left
{
float: left;
width: 15%;
}
.right
{
float:right;
width: 85%;
}
.right_bottom
{
float:right;
width: 85%;
height: 4%;
}
But it doesn't work

Answer 1

you can do like this : Fiddle
css code :
.mainDiv {
width:500px;
height:500px;
}
.topDiv {
height: 15%;
background-color: black;
}
.left {
float: left;
width: 15%;
height: 85%;
background-color:red;
}
.right {
float:right;
width: 85%;
height: 70%;
background-color:green;
}
.right_bottom {
float:right;
width: 85%;
height: 15%;
background-color:blue;
}
HTML code :
<div class="mainDiv">
<div class="topDiv"></div>
<div class="left"></div>
<div class="right"></div>
<div class="right_bottom"></div>
</div>

Answer 2

Not that it'll really help, you'll need to know css but here you go.
header {
background: red;
height: 120px;
}
section, aside {
height: 1000px;
}
article {
height: 850px;
}
section {
background: blue;
}
aside {
float: left;
background: yellow;
width: 30%;
}
footer {
width: 70%;
background: green;
height: 150px;
float: right;
}
<section>
<header></header>
<aside></aside>
<article></article>
<footer></footer>
</section>