I need help with this code :D


#1

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:


#2

@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

https://developer.mozilla.org/en-US/docs/Web/CSS/float

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model

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