Position i CSS

Jag förstår inte riktigt skillnaden mellan alla olika saker man kan välja mellan för position. Finns det någon enkel förklaring på någon hemsida?

Jag skulle i alla fall vilja ha så här:
__ __
| | | |
| DIV1 | | DIV2 |
| | | |
|__ | |______________________|

Div1 ska vara tio px från vänstra kanten, och den ska anpassas efter vilken bild som läggs in. Div två ska alltid vara 20 px från div1 och fylla ut resten av området ända till tio px från högra kanten. Kan detta ordnas? Jag har testat med float och relative, men då hamnar bara div2 under div1.

Det blev fel på skissen. Det får bli lite enklare:

<10 px> DIV1 <20 px> DIV2 <10 px>

Float-lösning:

<div style="float:left; width:100px; border:1px solid green; margin-left:10px;">Div1</div>
<div style="float:left; width:100px; border:1px solid green; margin-left:20px; margin-right:10px;">Div2</div>