How to make layout using css and divs?


Tags: html,css,layout

Problem :

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





Solution :

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>

    CSS Howto..

    How to select only top-level li in recursive menu?

    How to remove all input outline?

    How to add a close button to alertify log with CSS?

    How to add font to web application .css file

    How to change an image in CSS that has no class?

    How to bring parent div front?

    How does one change the colour of a div based on current time?

    CSS Rotation and Styling - how to?

    jQuery .animate() sets display:none, how to avoid?

    How to do browser detection with jQuery 1.3 with $.browser.msie deprecated?

    How do device screen resolutions scale in CSS?

    How to make divs appear and disapear on hover in css?

    How to display inline input in li?

    How fix position element so that while hovering on one element other two element should remain at same place

    css float: left clash/collision, how to avoid?

    W3.CSS how to get a standard header-[left-right]footer layout?

    How To Style background-image CSS

    CSS: how to address Samsung Android browser?

    How to Add Another Instance of Date picker in given Code

    how to see background color of div when if move on image

    How to make horizontal lines sit beside circle bullets using CSS

    How to remove the default active tab color when another tab is active using jquery

    Bootstrap glyphicon/nav bar showing popup window

    How did Google make these 3d buttons? [closed]

    How to create a firefox addon which injects CSS into a page? [closed]

    Jquery: how to get menu to expand towards the right instead of the left

    How to position
    element absolute from browser window?

    facebook and css, how to place a like comment dialog on top of a video?

    Images set within CSS and not showing in the HTML [closed]

    how to create this css?