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 lay down elements vertically from top to bottom, and then from right to left, using a clean HTML markup?

    How to set the CSS content property with a Google Material Icon?

    How to negate conjunction of two attributes in CSS selector

    How can I disable inherit in CSS?

    How to make transparent corners of borders for a perspective effect?

    How to inject a css class into an MvcHtmlString?

    How to scale image block using only css?

    How to develop Javascript and CSS and use minified versions when releasing?

    In IE Compat View, Developer tools shows elements “style” with the class of the previous element

    how to render tilted images in html or css or javascript ..?

    How can I make my
    fit vertically into a parent div?

    Show text at bottom with css

    How to remove the input field around an image button?

    How to call
  • tag CSS
  • CSS: how to set screen layout according to the different dimension

    How to keep border inside to take ribbon over to div?

    How to set a div within text?

    How can I attach an object to a fixed location on an image?

    How can i inherit properties from the css id rule to the css class?

    How to center an overflowing image inside of a constraining div

    How proper add 2 CSS file in a WordPress theme?

    How would I go about having placeholder divs that are then “overwritten” later with PHP?

    Getting unordered list in front of image slide-show in IE8, IE7 and probably IE6

    How do I align my label to the left of my text input box with CSS?

    How do I center my logo image to another div in CSS horizontally and vertically?

    How to apply two CSS classes to a single div/span

    How to include a css stylesheet in Orchard module?

    Force jQuery show/hide to respect display: table?

    How to provide default font height or content when

    or has no characters?

    How to configure a child div to display scrollbars only when a parent div percentage settings require it