4 Container - je 2 neben -u. untereinander

[bolshi]

Hallo,
ich versuche mich grad an einem Layout, bei dem vier div-Klassen in Form
von Karos paarweise nebeneinander und untereinander erscheinen sollen.
Die beiden oberen Container habe ich mit float:left; nebeneinander
anordnen können. Den unteren linken Container habe ich mit clear:both;
an die richtige Stelle bewegt. Der vierte Container, der quasi rechts
neben dem unteren linken erscheinen soll, lässt sich durch nichts mir
bekanntem positionieren. Was mache ich falsch?

#inhalt {     
    width: 60em;
    height: 40em;
    padding-left:1em;
    padding-top:1em;
    margin-left: 3em;
    margin-top: 2em;
    border-bottom: 1px double #69f;
    border-top: 1px double #69f;
    border-left:1px double #69f;
    border-right: 1px double #69f;
    z-index:1;

}

.container_1 {
    width: 25em;
    height: 15em;
    color: #f00;
    padding-left:1em;
    padding-top:1em;
    margin-left: 3em;
    margin-top: 2em;
    border-bottom: 1px double #69f;
    border-top: 1px double #69f;
    border-left:1px double #69f;
    border-right: 1px double #69f;
    z-index:1;
    float:left;
}

.container_2 {

    width: 25em;
    height: 15em;
    color: #f00;
    padding-left: 1em;
    padding-top: 1em;
    margin-left: 2em;
    margin-top: 2em;
    border-bottom: 1px double #69f;
    border-top: 1px double #69f;
    border-left:1px double #69f;
    border-right: 1px double #69f;
    z-index:1;
    float:left;
}

.container_3 {          
    width: 25em;
    height: 15em;
    background-color: #933;
    padding-left:1em;
    padding-top:1em;
    margin-left: 3em;
    margin-top: 21em;
    z-index:1;
    clear:both;
}

.container_4 {
    position: relative;   
    width: 25em;
    height: 15em;
    background-color: #c90;
    padding-left:1em;
    padding-top:1em;
    margin-left: 32em;
    margin-top: 2em;
    line-height: 160%;
    z-index:1;
    float:left;
}

Im Firefox laufen die ersten drei Container und der letzte macht nichts.
Im IE stehen nur der erste und zweite an der richtigen Position. container_3 und _4 irren sonstewo auf der Seite umher.

Bin für jeden Rat dankbar.

Grüße, Ingo

 

[Maik]

Probier es mal mit diesem Stylesheet:

#inhalt {
    width: 60em;
    height: 40em;
    padding-left:1em;
    padding-top:1em;
    margin-left: 3em;
    margin-top: 2em;
    border-bottom: 1px double #69f;
    border-top: 1px double #69f;
    border-left:1px double #69f;
    border-right: 1px double #69f;
}

.container_1 {
    width: 25em;
    height: 15em;
    color: #f00;
    padding-left:1em;
    padding-top:1em;
    margin-left: 3em !important; /* Moderne Browser */
    margin-left: 1.5em; /* IE */
    margin-top: 2em;
    border-bottom: 1px double #69f;
    border-top: 1px double #69f;
    border-left:1px double #69f;
    border-right: 1px double #69f;
    float: left;
}

.container_2 {
    width: 25em;
    height: 15em;
    color: #f00;
    padding-left: 1em;
    padding-top: 1em;
    margin-right: 3em !important; /* Moderne Browser */
    margin-right: 1.5em; /* IE */
    margin-top: 2em;
    border-bottom: 1px double #69f;
    border-top: 1px double #69f;
    border-left:1px double #69f;
    border-right: 1px double #69f;
    float: right;
}

.container_3 {
    width: 25em;
    height: 15em;
    background-color: #933;
    padding-left:1em;
    padding-top:1em;
    margin-left: 3em !important; /* Moderne Browser */
    margin-left: 1.5em; /* IE */
    margin-top:2em;
    float: left;
}

.container_4 {
    width: 25em;
    height: 15em;
    background-color: #c90;
    padding-left:1em;
    padding-top:1em;
    margin-right: 3em !important; /* Moderne Browser */
    margin-right: 1.5em; /* IE */
    margin-top: 2em;
    float: right;
}