I need help with this code :D

I just wanted to make two divs on left and two divs on right side. Divs would be placed this way:

  1.                3.
    
  2.                4.
    

This is my code and i am pretty sure there is much easier way.

#head {
height:60px;
width:100px;
background-color:red;

z-index:1;
float:right;
clear:right;

}
.left {
  height:60px;
width:100px;
background-color:blue;
float:right;
clear:right;
    }

.right {
height:60px;
width:100px;
background-color:yellow;
float:left;
clear:left;
margin-top:-59px;
}
#footer {
height:60px;
width:100px;
background-color:green;
float:left;
clear:left;
}
I know this is stupid question, but i am beginning to learn HTML and CSS, so the answer can be helpful for me in order to understand positioning much better. Sorry for bad english :smiley:

Thanks :smiley:

@ameryno,

It all start’s with you,
using a Browser
in which you load a HTML-file,
which we will call the HTML-Document.

This document has a minimal build of

<!DOCTYPE html>
  <html>
     <head>
          <title> </title>
     </head>
     <body>
       <!-- here you insert your HTML-code -->
     </body>
  </html>

The Browser =load’s= this document into Memory
in a pattern that is described as
the Document Object Model
in short the DOM.
( the interpretation of the DOM is Browser & Version specific )

            html
             |
       +-----+------+
       |            |
     head          body
       |
     title

In the description of your document in DOM-talk…
you will encounter terms like:
parent children sibling descendants ascendants…

The HTML-Element has no parent
but is a parent to 2 child-Element’s
the ‘head’-Element
and
the ‘body’-Element.

The ‘head’- and ‘body’-Element,
both being children to the ‘html’-Element
are siblings to each-other.

The ‘head’-Element is parent to the ‘title’-Element…
the ‘title’-Element is a child of the ‘head’-Element
the ‘title’-Element is also a descendant of the ‘html’-Element.

The DOM has several interface’s
over which you can access the data**/**information
held by the DOM.

##=========================================
Now read some documentation

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float

http://stackoverflow.com/questions/22385722/how-to-create-layout-with-two-boxes-left-side-and-one-box-right-side also read RELATED links in the article