Dudas con CSS

[bandolera]

Tengo un codigo que separa en dos columnas la pantalla, primero, una parte del css:

Código PHP:

  .colmask {
    position:relative;
    clear:both;
    float:left;
    width:100%;      
    overflow:hidden;
}
colleft {
    float:left;
    width:100%;
    position:relative;
}
.leftmenu {
    background:#fff; 
}
.leftmenu .colleft {
    right:75%; 
    background:#f4f4f4;
}
.leftmenu .col1 {
    width:71%; 
    left:102%;   
}
.leftmenu .col2 {
    width:21%; 
    left:6%;      
} 
   

Y en mi HTML el cuerpo con las columnas sale de esto:

Código PHP:

  <div class="colmask leftmenu">
    <div class="colleft">
        <div class="col1">
          ESTA ES LA COLUMNA 1
        </div>
        <div class="col2">
           ESTA ES LA COLUMNA 2
           ESTA ES LA COLUMNA 2
        </div>
    </div>
</div> 
   

Quisiera que me expliquen que no tengo muy claro, qué hace estas líneas:

Código PHP:

  .leftmenu .colleft {
    right:75%; 
    background:#f4f4f4;
} 
   

y esta:

Código PHP:

  <div class="colmask leftmenu"> 
   

No me queda muy claro qué hace primero y cómo se formatea Col1 y Col2 ?
Se puede hacer de otra forma?
Y por qué utilizar Colleft, no es suficiente con Colmask ???
Gracias.

[kseso?]

Selectores básicos

Por cierto, en el primer código que publica tiene un despiste:
faltaría el identificador de clase |.| o de id |#| precediendo a |colleft {...}|

[bandolera]

Iniciado por kseso?

Selectores básicos

Por cierto, en el primer código que publica tiene un despiste:
faltaría el identificador de clase |.| o de id |#| precediendo a |colleft {...}|

ok ya entendí el problema, pero no entiendo muy bien la solución, mejor cambio todo el código.

Gracias.