CODEWITHSUNDEEP
htmlcsslayout
r.mirzojonov
r.mirzojonov

Reputation: 1249

How to make layout using css and divs?

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 enter image description here

Upvotes: 0

Views: 68

Answers (2)

Dipali Vasani
Dipali Vasani

Reputation: 2536

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>

Upvotes: 2

Aaron
Aaron

Reputation: 10430

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>

Upvotes: 2

Related Questions