Probleme bei relativer Positionierung

Nachdem ich nun in meiner Testseite alle anderen Styles und JS-Dateien auskommentiert habe, damit die nicht mehr irgendwie stören könnten, habe ich eine Ursache gefunden. Der Text im Bereich zuvor ist nicht mehr lang genug, so dass der zwar durch Float umbricht, doch an den ersten und zweiten Bereich nicht vorbei kommt.
Nun wieder, wie Monika schrieb, dann sollte es gehen. So sollte, nein, so müsste es im Quelltext aussehen:

<div class="four columns-sonderklasse rightbox" style="clear:both">

Diese Scriptzeile

<div class="four columns<?php 
if ($zaehlemit == 4) echo "-sonderklasse"; ?> rightbox">

ändern in:

<div class="four columns<?php 
if ($zaehlemit == 4) echo "-sonderklasse rightbox\" style=\"clear:both\""; ?>>

Alles im Zusammenhang sollte der Abschnitt dann so aussehen.

$zaehlemit = 0;
if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); 
    $zaehlemit++; ?>


<div class="four columns<?php 
if ($zaehlemit == 4) echo "-sonderklasse rightbox\" style=\"clear:both\""; ?>>
<?php $image_attr = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID),

Oder Du lässt den unverändert und fügst clear:both der columns-sonderklasse in der CSS hinzu, was ja eigentlich auch gehen sollte.

Eigentlich brauchst Du diese Scriptzeile nicht ändern.

<div class="four columns<?php 
if ($zaehlemit == 4) echo "-sonderklasse"; ?> rightbox">

Für die Ansicht auf größeren Screens genügt es, wenn die Klasse in der CSS mit clear:both ergänzt wird:

/* #Base 960 Grid
================================================== */


    .container                                 { position: relative; width: 960px; margin: 0 auto; padding: 0; }
    .column, .columns                          { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
    .row                                       { margin-bottom: 20px; }
    .columns-sonderklasse                      { [COLOR=#ff0000]clear: both[/COLOR]; float: left; display: inline; margin-left: 250px; margin-right: 10px; }

Für die anderen Ansichten fehlen jedoch noch ein paar Kleinigkeiten. Für diese Ansichten zum Beispiel:

/* #Mobile (Landscape)
================================================== */


    /* Note: Design for a width of 480px */


    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .columns, .column { margin: 0 10px; }
        .columns-sonderklasse { margin: 0 10px; }


        .container .one.column,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        [COLOR=#ff0000].container .four.columns-sonderklasse,[/COLOR]

/*  #Mobile (Portrait)
================================================== */


    /* Note: Design for a width of 320px */


    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .columns, .column { margin: 0 10px; }
        .columns-sonderklasse { margin: 0 10px; }


        .container .one.column,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        [COLOR=#ff0000].container .four.columns-sonderklasse,[/COLOR]

Dann stimmt denke ich nur die mittlere Ansicht noch nicht, da müsste man auch noch einmal schauen, weil da das Maß nur 202 betragen würde.

Für die mittlere Ansicht wäre es noch um diese Zeile zu ergänzen, dann sollten eigentlich alle Ansichten stimmen:

/* #Tablet (Portrait)
================================================== */


    /* Note: Design for a width of 768px */


    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 768px; }
        .container .column,
        .container .columns                         { margin-left: 10px; margin-right: 10px; }
        [COLOR=#ff0000].container .columns-sonderklasse            { margin-left: 202px; margin-right: 10px; }[/COLOR]
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }

Ich sehe in Deiner CSS noch nicht, dass Du 'Tablet (Portrait)' wie im letzten Beispiel ergänzt hast. Möglich das es daran liegt.

/* #Tablet (Portrait)
================================================== */


    /* Note: Design for a width of 768px */

Für mich sah das gerade alles richtig aus, kann da keinen Fehler erkennen oder habe ich etwas übersehen?

Na ja, Du hast die Namen geändert und möglicherweise hatte der IE noch die CSS mit den alten Namen im Cache. Ich würde nicht unbedingt Namen mit Umlauten verwenden, weil Umlaute oft zu Problemen führen, wenn eine Datei unter einem Zeichensatz bearbeitet und gespeichert wird, unter einem anderen jedoch verarbeitet. Doch da zumindest kein Fehler im IE und FF bei mir zu sehen war, kannst Du die wohl auch so lassen. Doch wenn Du noch einmal so etwas machen möchtest, schreibe dann lieber Behaelter.

Jetzt bin ich durcheinander gekommen, hatte im IE, Chrome und FF getestet und der Chrome hat mir statt 'container' in der CSS einfach 'Behälter' angezeigt, als automatisch übersetzte Version. Da ich mit dem Chrome selten arbeite, wusste ich nicht, dass der eine CSS eigenmächtig übersetzt. Deshalb war mein letzter Post praktisch Unfug mit den Umlauten.